createElement vs createDocumentFragment

Benchmark created by Stacey Abshire on

Description

Comparison of creating multiple elements and appending them to the DOM using createElement multiple times, or using createDocumentFragment, and appending the children to the fragment, and then append the fragment to the DOM.

Preparation HTML

<div id='myDiv'>
    <ul id='myUL'>
    </ul>
</div>

Setup

var myUL = document.getElementById('myUL');

Teardown


    myUL.innerHTML = '';
    myUL = null;

Test runner

Ready to run.

Testing in
TestOps/sec
createElement
for (var i = 0, j = 100; i < j; i++) {
    var el = document.createElement('li');
    var txt = document.createTextNode('sample');
    el.appendChild(txt);
    myUL.appendChild(el);
}
ready
createDocumentFragment
var fragment = document.createDocumentFragment();
for (var i = 0, j = 100; i < j; i++) {
    var el = document.createElement('li');
    var txt = document.createTextNode('sample');
    el.appendChild(txt);
    fragment.appendChild(el);
}
myUL.appendChild(fragment);
ready

Revisions

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

  • Revision 1: published by Stacey Abshire on
  • Revision 2: published on