為什么使用innerHTML比JQuery的append（）函數更慢地將大量元素附加到DOM？

Question

我有一個vanilla 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上它需要大約30ms左右，在IE上需要大約240ms。

你可以在這里玩所有的變化： 小提琴

我知道可能還有許多其他版本要測試，但是jQuery在幕后做什么才能使它的.append()比原生JS innerHTML +=快得多，為什么創建一個新元素並將其追加得更快？

Answer 1

如果你做得對 ，你可以將你的“最佳”結果翻倍。

原生DOM方法總是比它們的jQuery替代方法更快。 但是， .innerHTML並不理想。

當你使用.innerHTML += ... ，會發生以下情況：

1. 構建當前存在的整個DOM的HTML表示
2. 將新字符串附加到其中
3. 解析結果並從中創建一個全新的DOM樹
4. 把新東西放在舊東西的位置

本機方法的工作量明顯減少;）

還應該注意， innerHTML += ... 完全核對DOM ，這意味着對舊元素的任何引用都會丟失，特別是事件處理程序不會被保留（除非你使用了內聯事件處理程序，你不應該這樣做）

Answer 2

在幕后， jQuery使用的是文檔片段 ，它比直接操作文檔要好得多。 John Resig在2008年討論了文檔片段的優異性能 ，它可以為您提供有關jQuery正在做什么以及為什么做的可靠解釋。

Answer 3

在我看來，如果你預先計算了你想要追加的所有內容，那么它會更有效率，然后追加它 - 最小化所需的DOM操作。 例如：

var toAppend = "";
for (i = 0; i < 5000; ++i) {
   toAppend += "<div>" + i + "</div>";
}
div.append(toAppend)

如果您希望它們嵌套，您可以使其遞歸，或者提出其他解決方案。 無論哪種方式，我相信字符串操作總是比DOM操作更快