createElement vs createDocumentFragment (v2)

Revision 2 of this benchmark created 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'>
</div>

Setup

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

Teardown


    myDiv.innerHTML = '';
    myDiv = null;

Test runner

Ready to run.

Testing in
TestOps/sec
attribute1
var div = document.createElement('div');

for (var i = 0, j = 1000; i < j; i++) {
    var c = document.createElement('div');
    c.setAttribute('hello', 'world');
    var d = document.createTextNode('sample');
    c.appendChild(d);
    div.appendChild(c);
}

myDiv.appendChild(div);
ready
attribute2
var div = document.createElement('div');

for (var i = 0, j = 1000; i < j; i++) {
    var c = document.createElement('div');
    var a = document.createAttribute('hello');
    a.value = 'world';
    c.setAttributeNode(a);
    var d = document.createTextNode('sample');
    c.appendChild(d);
    div.appendChild(c);
}

myDiv.appendChild(div);
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