innerHTML vs. cloneNode (v10)

Revision 10 of this benchmark created by Justin Meyer on

Description

Tests various DOM construction patterns.

Preparation HTML

<div id="destination"></div>
<script>
  var content = '<div class="test"><span style="color: red">Wooo Text!</span></div><div>More text!</div>',
      dest = document.getElementById("destination");
  
  // 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]);
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
dest.innerHTML = content;
ready
cloneNode
 
ready

Revisions

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