Adding Element to DOM with createDocumentFragment (v2)

Revision 2 of this benchmark created by Small Hadron Collider on

Description

Testing this: http://net.tutsplus.com/tutorials/javascript-ajax/the-10-javascript-mistakes-youre-making (No. 9)

Preparation HTML

<ul id="list">
    <li>Test</li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
Normal
var list = document.getElementById('list'),
    items = ["one", "two", "three", "four"],
    el;

for (var i = 0; items[i]; i++) {
  el = document.createElement("li");
  el.appendChild( document.createTextNode(items[i]) );
  list.appendChild(el); // slow, bad idea
}
ready
Document Fragment
var list = document.getElementById('list'),
    frag = document.createDocumentFragment(),
    items = ["one", "two", "three", "four"],
    el;

for (var i = 0; items[i]; i++) {
  el = document.createElement("li");
  el.appendChild( document.createTextNode(items[i]) );
  frag.appendChild(el); // better!
}

list.appendChild(frag);
ready

Revisions

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

  • Revision 1: published by Small Hadron Collider on
  • Revision 2: published by Small Hadron Collider on