在DOM中创建> 1000个元素时，MSEdge超级慢

编程问答 2022-08-12

问题描述

其他所有浏览器都几乎立即通过此JS，请参见下面的基准测试

它只是在函数中的此代码上放慢了速度（其余部分会立即运行），它是如此简单，使我对如何解决它感到困惑。

我无法在JSfiddle中重现它，这是等效的代码https://jsfiddle.net/5ax7mshz/。我可以通过performance.Now（）看到，这是在我们的应用程序中减慢其运行速度的唯一代码，它是一个纯JS + JQ应用程序，这里没有其他变量...某种程度上，它花了600倍的时间它在摆弄。我的智慧到此为止。

谢谢！

var options = "";
for (var i = 0; i < data.vendor.length; i++) {
    options += "<option value='" + data.vendor[i].vendorID + "'>" + data.vendor[i].Name + "</option>";
}
$el.append(options);

实际基准值

Average Edge基准测试（到目前为止，不幸的是，在此处尝试某些解决方案仍得出相似的值）

  • 总共28155毫秒
    • 6968毫秒list1（2232项）
    • 21179 ms列表2（4016个项目）
    • 7.6毫秒list3（10个项目）

如果您想笑的话，这里是Chrome

  • 总计55.07 ms
    • 21.09毫秒list1（2232项）
    • 32.18 ms列表2（4016个项目）
    • 1.79毫秒list3（10个项目）

Aaa和Firefox总共耗时46ms

enter image description here

enter image description here

解决方法

您是从jQuery使用的append吗？

我在这台计算机上没有Edge，但是我有IE，因此我将其作为合理的等效项使用。我尝试了几种4000个select-option版本：

  1. 字符串concat，后跟单个jQuery append
    2. 每个条目
  2. jQuery append
    3. 每个元素
  3. appendChild（无jQuery）
  4. 将new Option(...添加到select.options（无jQuery）

我正在使用计时

console.time('build');
build();
console.timeEnd('build');

然后运行两次结果-最快时间（ms）：

IE11 805 2120 605 6033
FF80  48  190  26   21
CR84  95  342  52  214

具有4000个元素，这是与您的list2的比较，而第一个计时编号应与您的结果匹配（尽管请注意，由于我无权访问您的列表，因此我填写了每个条目的值/文字）。请注意，Chrome的运行速度明显慢于您的浏览器（运行速度为95 vs 32-3倍），而IE浏览器运行速度明显更快（805 vs 2117-26x）。对于我的Chrome进程，我有许多打开的选项卡，但是还有一个更新在等待，对于我的IE进程，我没有其他任何打开，但是它与Edge也不完全相同（假设您没有使用Webkit Edge，如果您使用的是，那是一个非常不同的引擎）

基于jQuery的版本均表现不佳。这并不是真正的公平竞争，因为此方法必须解析字符串并将其解释为HTML。除了FireFox之外，Build 4在所有其他方面的表现也很差。因此，似乎使用appendChild的香草javascript是最好的方法。

要将其映射回您的数据（可能会 进一步延迟对象访问）：

function build(data,select) {
  var n=data.Vendor.length;
  for (var i=0; i<n; i++) {
    var item=data.Vendor[i];
    var opt=document.createElement("option");
    opt.value=item.VendorID;
    opt.innerText=item.Name;
    select.appendChild(opt);
  }
}
// Call egs:
// build(data,document.getElementById("itemList"));
// build(data,document.forms[0].itemSelect);
,

完成此操作至少要使其总共5-7秒（5000-7000ms），而不是28秒，这是“好的”，因为这仅影响几个客户端，其余时间使用Chrome（50ms）和FF（40ms）和IE11 +（300毫秒）

IHubContext
javascriptmicrosoft-edgeperformance