DOM vs innerHTML (v16)

Revision 16 of this benchmark created by Thomas Aylott on

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
var div, UID = 0;

div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);
div = document.createElement('div');div.setAttribute('id', 'id' + (++UID)); fragment.appendChild(div);

node.appendChild(fragment);
node.innerHTML = '';
ready
innerHTML +=
var HTML = '', UID = 0;

HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';

node.innerHTML = HTML;
node.innerHTML = '';
ready
replaceHTML +=
var HTML = '', UID = 0;

HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';
HTML += '<div' + ' id="id' + (++UID) + '"' + '></div>';

replaceHTML(node, HTML);
replaceHTML(node, '');
ready

Revisions

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