Speed test: innerHTML versus DOM manipulation

To quote myself, there seems to be some mythology on the Intertubes regarding the relative speeds of using JavaScript to dump stuff into innerHTML versus directly scripting the DOM. I wanted to see for myself, so I wrote code to test a relatively simple, but perhaps common scenario. In the process of researching the topic, I tweaked and optimized each method for efficiency until I got to the result below.

My conclusion? DOM scripting is actually as fast or faster than innerHTML on cool (wink) browsers (that is, Safari and Opera), marginally slower on Gecko-based browsers (ie. Firefox and Camino), and significantly slower on Internet Explorer 6 and 7. (Why is it always IE that causes the problems?)

Results (YMMV)

I ran the two methods outlined below on my Apple MacBook (2.0GHz Core 2 duo processor, 2GB of RAM) in several browsers. I ran each test on each browser 5 times set to loop 1000 times.

I wasn’t terribly careful about closing all other apps, rebooting before each test run, yadda, yadda, yadda. Non-scientific as my results are, I still found it a useful way to compare innerHTML to DOM scripting as well as get a rough idea of the efficiency of the two implementations in various browsers. (Note: Windows tests were run using Parallels 2, build 1940, running Windows XP Home.)

Results are listed as: average time in milliseconds (min time / max time).

Try it yourself and list your results in the comments!

Loop 10 100 1000 10000 times

var html = [];
while (--iterations > -1) {
   html[html.length] =  '<div>' + speed.params.content + '</div>';
}
document.getElementById('innerhtml').innerHTML = html.join('');

var node = document.createElement('DIV');
node.appendChild(document.createTextNode(speed.params.pieces[0]));
var strong = document.createElement('STRONG');
strong.appendChild(document.createTextNode(speed.params.pieces[1]));
node.appendChild(strong);
node.appendChild(document.createTextNode(speed.params.pieces[2]));
var container = document.getElementById('domnodes');
var fragment = document.createDocumentFragment();
fragment.appendChild(node);
while (--iterations > 0) {
   fragment.appendChild(fragment.firstChild.cloneNode(true));
}
container.appendChild(fragment);

Comments

So…What do you think?

andrew.hedges.name / experiments / Speed test: innerHTML versus DOM manipulation
Need web development help? Let's talk.

Copyright © 2007. All rights reserved.