如何解决在DOM中创建> 1000个元素时,MSEdge超级慢
其他所有浏览器都几乎立即通过此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
解决方法
您是从jQuery使用的append
吗?
我在这台计算机上没有Edge,但是我有IE,因此我将其作为合理的等效项使用。我尝试了几种4000个select-option版本:
- 字符串concat,后跟单个jQuery
append
每个条目 - jQuery
append
每个元素 -
appendChild
(无jQuery) - 将
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。