Computernerd Computernerd - 1 month ago 23
Javascript Question

.append VS .html VS .innerHTML performance

This sites run a test between the 3 different methods and it seems .html is the fastest followed by .append followed by .innerHTML . Can someone explain to me the reasons why ?

Site which does the comparsion among the three methods

I have read this this SO qn which is related but i dont really understand the ans given and the question didnt really elaborate much regarding .innerhtml

I dont understand the part


A temporary element is created, let's call it x. x's innerHTML is set to the string of HTML that you've passed. Then jQuery will transfer each of the produced nodes (that is, x's childNodes) over to a newly created document fragment, which it will then cache for next time. It will then return the fragment's childNodes as a fresh DOM collection.
Note that it's actually a lot more complicated than that, as jQuery does a bunch of cross-browser checks and various other optimisations. E.g. if you pass just
<div></div>
to jQuery(), jQuery will take a shortcut and simply do document.createElement('div').


Can someone simplify this for me thanks

Answer

That benchmark is worthless. innerHTML is always faster than DOM manipulation.

jQuery seems faster because it prepares a string with all the HTML first while the others do one operation each iteration. Also note that jQuery.html() uses innerHTML whenever it can.

jQuery from benchmark

var html = '';
for (var i = 0; i < len; i++) {
  html += '<div>Test ' + i + '</div>';
}

$('#list').html(html);

innerHTML from benchmark

var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
  list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}

The test for innerHTML would be a lot faster if it was written like:

var list = document.getElementById('list');
var html = '';

for (var i = 0; i < len; i++) {
    html += '<div>Test ' + i + '</div>';
}

list.innerHTML = html;

http://jsben.ch/#/yDvKH

Comments