DOM vs innerHTML (v15)

Revision 15 of this benchmark created by Thomas Aylott 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();
  
  function replaceHTML(el, html) {
   var el = typeof el === "string" ? document.getElementById(el) : el,
       newEl; /*@cc_on  el.innerHTML = html  This is only fast on IE @*/
   if (el) {
    newEl = el.cloneNode(false);
    newEl.innerHTML = html;
    if (el.parentNode) {
     el.parentNode.replaceChild(newEl, el);
    }
   }
  }
</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
replaceHTML
replaceHTML(node, '<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>');

replaceHTML(node, 'tested');
ready

Revisions

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