out of dom vs documentfragment (v11)

Revision 11 of this benchmark created on

Description

moved innerHTML crap from previous revisions to teardown.

Preparation HTML

<div id="list1">
</div>
<div id="list2">
</div>

Teardown


    document.getElementById('list1').innerHTML = '';
    document.getElementById('list2').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
out of dom
var list = document.getElementById('list1');

for (var i = 0; i < 500; i++) {
  a = document.createElement('a');
  a.innerText = 'link ' + i;
  a.style.display = 'block';
  list.appendChild(a);
}
ready
documentfragment
var list = document.getElementById('list2'),
    frag = document.createDocumentFragment();

for (var i = 0; i < 500; i++) {
  a = document.createElement('a');
  a.innerText = 'link ' + i;
  a.style.display = 'block';
  frag.appendChild(a);
}

list.appendChild(frag);
ready
without documentfragment
var list = document.getElementById('list2'),
    newEl = list.cloneNode(false);
for (var i = 0; i < 500; i++) {
  a = document.createElement('a');
  a.innerText = 'link ' + i;
  a.style.display = 'block';
  newEl.appendChild(a);
}
list.parentNode.replaceChild(newEl, list);
ready

Revisions

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