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

Question

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:

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 : It didn't seem to have any impact on performance if I used the $("#me") selector or passed in $(div)

Vanilla with 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)

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

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?

Answer 1

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

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

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

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 ;)

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)

Answer 2

Behind the scenes, jQuery is using document fragments , which perform much better than straight manipulation of the document. John Resig discussed document fragments' superior performance in 2008 , which should give you a solid explanation about what jQuery is doing and why.

Answer 3

It seems to me that it would be much more efficient if you calculated everything you wished to append beforehand, then append that - minimize the DOM manipulation required. eg:

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

If you're wanting them to be nested, you could make it recursive, or come up with some other solution. either way, I believe string manipulation will always be faster than DOM manipulation