Question

更新：jsfiddle/v4

演示中的愚蠢错字表示两次执行都是1000而不是10,000。

在10,000 Edge停摆，这是我在网站上看到的很多东西。 1000，只需几秒钟。

然而，在Edge上等了五分多钟后，我关闭了镀铬在不到5秒的时间内完成的过程。

在所提到的浏览器中运行的示例具有这些结果。第一个数字是渲染到屏幕的测试，第二个数字填充jQuery创建的元素。

Browser:    To Screen   To jQuery-created element, not injected into DOM.
IE/Edge:    Stalled out.
Chrome:     4519        3757
Firefox:    4032        4092
Opera:      16925       16450

我在这些测试中遇到了一些崩溃，因为我不认为任何浏览器都喜欢嵌套10,000深的标签，但这根本不是我实际上做的事情。除了MS的浏览器之外，我没有遇到写入jquery创建的元素的测试崩溃。

我在IE 11＆amp;在创建大量元素时，Edge都需要很长时间。 Chrome / Firefox / Opera都能以令人难以置信的快速执行脚本。即便是我的LG Optimus的Chrome浏览器也不会挣扎。但Edge / IE可能需要几分钟时间。

无论它的价值如何，我都在Windows 10上。

我创造了一个非常人为的例子，它将自己内部的相同元素嵌套10,000次，并在完成后立即计算长度。

它不会花费浏览器时间来显示元素，如第二个按钮所示，即使元素没有注入DOM，也会花费相同的时间

jsfiddle/v3

除"<span>" + variable + "</span>"的经典javascript路线外，还有什么可以做的吗？能够使用jQuery方法更加清晰。

我已经搜索了这个，但是如果有关于该主题的其他帖子，我还没有找到正确的单词组合。

（jsfiddle / v4代码）

$(document).ready(function () {
   $("#clk").click(function () {
       StartTime = new Date().getTime();
       var htm = $("<span>")
       for (var i=0; i<10000; i++) {
           htm = $("<span>").append(htm);
       }
       $("#recip").html(htm);
       EndTime = new Date().getTime();
       TotalTime = EndTime - StartTime;
       alert(TotalTime + "ms")
   });

   var $recip = $("<div>");
   $("#clk2").click(function () {
       StartTime = new Date().getTime();
       var htm = $("<span>")
       for (var i=0; i<10000; i++) {
           htm = $("<span>").append(htm);
       }
       $recip.html(htm);
       EndTime = new Date().getTime();
       TotalTime = EndTime - StartTime;
       alert(TotalTime + "ms")
   });
});

在IE / Edge中jQuery html元素创建速度极慢？有什么我能做的吗？

更新：jsfiddle/v4

0 个答案: