javascript - 为什么使用 innerHTML 向 DOM 追加大量元素比 JQuery 的 append() 函数慢？

Question

我有一个普通的 JavaScript 函数来测试将大量元素附加到 DOM:

var start = new Date().getTime();
var blah;
var div = document.getElementById("me");
for (i = 0; i < 5000; ++i) {
    div.innerHTML += "<div>" + i + "</div>";//Simply add to div.
}
var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

结果:

         Chrome           IE10
         ------           -----  
Vanilla      39             130  (seconds)

JQuery:

for (i = 0; i < 5000; ++i) {
    $("#me").append("<div>" + i + "</div>");//Now using append instead.
}

结果

         Chrome           IE10
         ------           -----  
Vanilla   39000         130,000  (milliseconds) 
JQuery      260            1300  (milliseconds) 

注意:如果我使用 $("#me") 似乎对性能没有任何影响选择器或传入 $(div)

原版 AppendChild :

for (i = 0; i < 5000; ++i) {
    var el = document.createElement("div");//Now create an element and append it.
    el.innerHTML = i;
    div.appendChild(el);
}

             Chrome           IE10
             ------           -----  
Vanilla       39000         130,000  (ms)   
JQuery          260            1300  (ms) 
AppendChild      30             240  (ms)

令我大吃一惊的是，这是迄今为止最快、性能最好的。在 Chrome 上它需要大约 30 毫秒，而在 IE 上大约需要 240 毫秒。

您可以在这里尝试所有变体:Fiddle

我知道可能还有许多其他变体需要测试，但是 jQuery 在幕后做了什么来使它成为 .append()比原生 JS 快得多 innerHTML +=为什么创建新元素并添加它更快？

Answer 1

如果你do things right ，您几乎可以将“最佳”结果翻倍。

原生 DOM 方法总是比它们的 jQuery 替代方法快。但是，.innerHTML 并不理想。

当您使用 .innerHTML += ... 时，会发生以下情况:

1. 构建当前存在的整个 DOM 的 HTML 表示
2. 将你的新字符串附加到它
3. 解析结果并从中创建一个全新的 DOM 树
4. 用新的东西代替旧的东西

原生方法的工作量明显减少 ;)

还应该注意 innerHTML += ... 完全破坏了 DOM，这意味着对旧元素的任何引用都将丢失，尤其是事件处理程序不会丢失保留(除非你使用内联事件处理程序，你不应该这样做)