DocumentFragment is faster!

Benchmark created by deadlink182 on December 17, 2013

Description

Preparation HTML

<style>
   .el {
width: 10px;
height: 10px;
border: 1px solid black;
box-shadow: 0 0 10px 1px grey;
}
</style>
<div id="parent"><div id="work" style="width:400px;height:400px;overflow: scroll;"></div></div>

Setup

parentEl = document.getElementById('parent');
    work = document.getElementById('work');
    childCount = 10;
    for (var i = 0; i < 10; i++) {
      parentEl.appendChild(gen());
    }
    
    function gen() {
      var el = document.createElement('a'),
        flag = Math.random() > 0.5;
      el.className = 'el';
      el.style.float = flag ? 'left' : 'right';
      el.style.backgroundColor = flag ? 'red' : 'green';
      el.style.marginTop = ~~ (Math.random() * 5) + 'px';
      el.style.marginLeft = ~~ (Math.random() * 5) + 'px';
      el.onclick = function() {
        alert(123);
      };
      return el;
    }

Teardown

    work.innerHTML = '';
    for (var i = 0; i < 10; i++) {
      work.appendChild(gen());
    }
  

Test runner

var fragment = document.createDocumentFragment(),
  _fr = fragment.appendChild(parentEl.childNodes[0]);
for (var i = 0; i < childCount; i++) {
  _fr.appendChild(gen());
}
parentEl.appendChild(fragment);

for (var i = 0; i < childCount; i++) {
  work.appendChild(gen());
}

Revisions

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

• Revision 1: published by deadlink182 on December 17, 2013