为什么使用innerHTML比JQuery的append（）函数更慢地将大量元素附加到DOM？ [英] Why is using innerHTML to append a large number of elements to the DOM slower than JQuery's append() function?

问题描述

我有一个vanilla JavaScript函数来测试向DOM添加大量元素：

I have a vanilla JavaScript function to test appending large numbers of elements to the 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);

结果：

Results:

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

JQuery：

JQuery:

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

结果

Results

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

NB ：它似乎没有任何影响如果我使用 $（＃me）选择器或传入 $（div）

NB: It didn't seem to have any impact on performance if I used the $("#me") selector or passed in $(div)

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。

To my huge surprise this was by far the fastest, most performant. On Chrome it takes a whopping 30ms or so, and on IE it takes around 240ms.

您可以在此处使用所有变体：小提琴

You can play with all the variations here: Fiddle

我知道可能还有很多其他变种要测试，但jQuery在幕后做什么才能使它成为 .append（）比本机JS innerHTML + = 快得多，为什么要创建一个新元素并将其追加得更快？

I know there could be many other variations to test, but what is jQuery doing behind the scenes to make it's .append() so much faster than native JS innerHTML += and why is creating a new element and appending it even faster?

推荐答案

如果您做正确的事，你可以将你的最佳结果翻倍。

If you do things right, you can pretty much double your "best" result.

本机DOM方法总是比它们的jQuery备选方案更快。但是， .innerHTML 并不理想。

Native DOM methods are always faster than their jQuery alternatives. However, .innerHTML is not ideal.

当您使用 .innerHTML + =时。 .. ，这是发生的事情：

When you use .innerHTML += ..., here's what happens:

1. 构建当前存在的整个DOM的HTML表示


2. 将新字符串附加到其中


3. 解析结果并从中创建一个全新的DOM树


4. 放入代替旧东西的新东西

1. Build an HTML representation of the entire DOM that current exists
2. Append your new string to it
3. Parse the result and create a whole new DOM tree from it
4. Put the new stuff in place of the old stuff

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

The native methods are significantly less work ;)

还应该注意 innerHTML + = ... 完全核对DOM ，这意味着对旧元素的任何引用都是丢失，特别是事件处理程序不被保留（除非你使用内联事件处理程序，你不应该这样）

It should also be noted that innerHTML += ... completely nukes the DOM, meaning any references to the old elements are lost and in particular event handlers are not kept (unless you used inline event handlers, which you shouldn't be)

这篇关于为什么使用innerHTML比JQuery的append（）函数更慢地将大量元素附加到DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！