DOM vs innerHTML (v10)

Revision 10 of this benchmark created by gonchuki on

Description

Fine tuning the DOM method to yield better performance for this particular synthetic test. (alternate method without cloning)

Preparation HTML

<div id="main_node"></div>
<script>
  var node = document.getElementById('main_node'),
      fragment = document.createDocumentFragment();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
DOM
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));
fragment.appendChild(document.createElement('div'));

node.appendChild(fragment);

node.innerHTML = '';
ready
innerHTML
node.innerHTML = '<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>';

node.innerHTML = '';
ready

Revisions

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