innerHTML vs. W3C DOM (v6)

Revision 6 of this benchmark created by Eamon Nerbonne on

Preparation HTML

<div id="container" style="display:none;"></div>
<script>
var container = document.getElementById("container");
var run = 0;
</script>

Teardown


    run = 0

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
container.innerHTML = '<div id="test" class="testClass testClass2"><p>This is some text</p><p>This is some  more text</p><div id="inner"><p>Some more stuff (run ' + (run++) + ')</p></div></div>';
 
ready
W3C DOM
while(container.firstChild)
  container.removeChild(container.firstChild);

var p3 =document.createElement("p");
p3.textContent = "Some more stuff (run " + (run++) + ")";

var div2 =  document.createElement("div");
div2.id = "inner";
div2.appendChild(p3);

var p1 =document.createElement("p");
p1.textContent = "This is some text";
var p2 =document.createElement("p");
p2.textContent = "This is some more text";

var div = document.createElement("div");
div.id = "test";
div.className = "testClass testClass2";
div.appendChild(p1);
div.appendChild(p2);
div.appendChild(div2);

container.appendChild(div);
 
ready

Revisions

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

  • Revision 3: published on
  • Revision 6: published by Eamon Nerbonne on