out of dom vs documentfragment Vs Inner HTML (v23)

Revision 23 of this benchmark created by Kumar Abhishek on

Description

Updated Loop Values

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var list = document.getElementById('list1'), str = '<div>', i;
for (i = 0; i < 250; ++i){
  str = str + '<a style="display:block;">link ' + i + '</a>';
}
list.innerHTML = str + '</div>';
ready
innerHTML (Array Based)
var list = document.getElementById('list1'), str = ['<div>'],i;
for (i = 0; i < 250; ++i){
  str.push('<a style="display:block;">link' + i + '</a>');
}
str.push('</div>');
list.innerHTML = str.join('');
ready
out of dom
var list = document.getElementById('list1'),
    elem = document.createElement('div');

list.innerHTML = "";
for (var i = 0; i < 250; i++) {
  a = document.createElement('a');
  a.innerHTML = 'link ' + i;
  a.style.display = 'block';
  elem.appendChild(a);
}
list.appendChild(elem);
ready
documentfragment
var list = document.getElementById('list2'),
    elem = document.createDocumentFragment(),
    elem2 = document.createElement('div');

list.innerHTML = "";
for (var i = 0; i < 250; i++) {
  a = document.createElement('a');
  a.innerHTML = 'link ' + i;
  a.style.display = 'block';
  elem.appendChild(a);
}
elem2.appendChild(elem);
list.appendChild(elem2);
ready

Revisions

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