innerHTML vs. W3C DOM

JavaScript performance comparison

Test case created by Wayne Burkett

Preparation code

<div id="container" style="display:none;"></div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
innerHTML
document.getElementById("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</p></div></div>';
 
pending…
W3C DOM
var container = document.getElementById("container");

var div = document.createElement("div");
div.setAttribute("id", "test");
div.className = "testClass";
div.className += "testClass2";
var p1 = document.createElement("p");
p1.appendChild(document.createTextNode("This is some text"));
var p2 = document.createElement("p");
p2.appendChild(document.createTextNode("This is some more text"));

var div2 =  document.createElement("div");
div2.setAttribute("id", "inner");
var p3 = document.createElement("p");
p3.appendChild(document.createTextNode("Some more stuff"));
div2.appendChild(p3);
div.appendChild(p1);
div.appendChild(p2);
div.appendChild(div2);

container.appendChild(div);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Eamon Nerbonne commented :

Warning: this version of this benchmark is buggy! The DOM variant creates an ever-growing document, whereas the innerHTML variant replaces the previous iterations content - that makes the DOM look really slow. I fixed this issue in revision 6 of this test.

Add a comment