appendChild vs. DocumentFragment vs. innerHTML (v19)

Revision 19 of this benchmark created by Chris Khoo on

Description

NOTE: This test is a work in progress & wrong at the moment!

Preparation HTML

<ul id="test">
  <li></li>
  <li></li>
  <li></li>
</ul>

Setup

var testElt = document.getElementById('test');
    var fragment = testElt.cloneNode(true);

Test runner

Ready to run.

Testing in
TestOps/sec
appendChild
testElt.innerHTML = '';
for (var i = 0; i < 2; i++) {
    var li = document.createElement('li');
    li.innerText = Math.random();
    testElt.appendChild(li);
}
ready
DocumentFragment
testElt.innerHTML = '';
for (var i = 0; i < 2; i++) {
    var li = fragment.childNodes[i];
    li.innerText = Math.random();
}
testElt.appendChild(fragment);
ready
innerHTML
testElt.innerHTML = '';
var string = '';
for (var i = 0; i < 2; i++) {
    string += '<li>' + Math.random() + '</li>';
}
testElt.innerHTML = string;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.