innerHTML vs. cloneNode (v13)

Revision 13 of this benchmark created by Yanis Benson on

Description

Tests various DOM construction patterns.

Preparation HTML

<style>
 .destination {display: none;}
</style>
<div id="destination" class="destination"></div>
<script>
  var content = '<div class="test"><span style="color: red">Wooo Text!</span></div><div>More text!</div>';
  var dest = document.getElementById("destination");
  var div = document.createElement('div');
  dest.appendChild(div);
  
  // For Element cloneNode test
  var womb = document.createElement("div");
  womb.innerHTML = content;
  
  // For doc fragment test
  var frag = document.createDocumentFragment(),
      clone = womb.cloneNode(true),
      len = clone.childNodes.length;
  while (len--) {
   frag.appendChild(clone.childNodes[0]);
  }

  var doc = document;

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
dest.removeChild(div);
div = document.createElement('div');
dest.appendChild(div);
div.innerHTML = content;
 
ready
cloneNode
dest.removeChild(div);
div = document.createElement('div');
dest.appendChild(div);
var clone = womb.cloneNode(true),
    len = clone.childNodes.length;
while (len--) {
 div.appendChild(clone.childNodes[0]);
}
 
ready
DocumentFragment
dest.removeChild(div);
div = document.createElement('div');
dest.appendChild(div);
div.appendChild(frag.cloneNode(true));
 
ready
DOM post insert
dest.removeChild(div);
div = document.createElement('div');
dest.appendChild(div);

var child = document.createElement('div');
child.className = "test";

var subChild = document.createElement('span');
subChild.style.color = "red";
subChild.appendChild(document.createTextNode("Wooo Text!"));
child.appendChild(subChild);
div.appendChild(child);


child = document.createElement('div');
child.appendChild(document.createTextNode("More text!"));
div.appendChild(child);
 
ready
DOM pre insert
dest.removeChild(div);
div = document.createElement('div');
dest.appendChild(div);
var child = document.createElement('div');
div.appendChild(child);
child.className = "test";

var subChild = document.createElement('span');
child.appendChild(subChild);
subChild.style.color = "red";
subChild.appendChild(document.createTextNode("Wooo Text!"));

child = document.createElement('div');
div.appendChild(child);
child.appendChild(document.createTextNode("More text!"));
ready
DOM post insert in jsland
dest.removeChild(div);
div = document.createElement('div');

var child = document.createElement('div');
child.className = "test";

var subChild = document.createElement('span');
subChild.style.color = "red";
subChild.appendChild(document.createTextNode("Wooo Text!"));
child.appendChild(subChild);
div.appendChild(child);


child = document.createElement('div');
child.appendChild(document.createTextNode("More text!"));
div.appendChild(child);

dest.appendChild(div);
 
ready
cloneNode jsland
dest.removeChild(div);
div = document.createElement('div');
var clone = womb.cloneNode(true),
    len = clone.childNodes.length;
while (len--) {
 div.appendChild(clone.childNodes[0]);
}
dest.appendChild(div);
 
ready
DOM pre insert jsland
dest.removeChild(div);
div = document.createElement('div');

var child = document.createElement('div');
div.appendChild(child);
child.className = "test";

var subChild = document.createElement('span');
child.appendChild(subChild);
subChild.style.color = "red";
subChild.appendChild(document.createTextNode("Wooo Text!"));

child = document.createElement('div');
div.appendChild(child);
child.appendChild(document.createTextNode("More text!"));

dest.appendChild(div);
 
ready

Revisions

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