DOM vs. innerHTML

I did the W3C DOM vs. innerHTML speed tests in Mozilla 1.75, Opera 8 and Safari 1.3. Little change in the first two browsers, rather more in Safari.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?



Comments are closed.

1 Posted by Keith on 22 April 2005 | Permalink

In the first and third lines, you have "very slow" showing a higher index than "slow", but "slowest" is only a fraction of "slow". Mistake?

2 Posted by Frenzie on 22 April 2005 | Permalink

Slowest informs about the slowest script in a certain browser (Mozilla and Safari were slowest with the first test, Opera with the third and you can check the rest for yourself).

3 Posted by Dean Edwards on 23 April 2005 | Permalink

It's worth remembering that setting innerHTML will trash any object references you may have stored. This affects event handlers as well. Also, you can't generate table content in this manner on an IE platform (not sure about others). The table model disallows it. You have to use the insertRow/insertCell methods instead.

4 Posted by Vincenzo on 26 April 2005 | Permalink

You should use sub-results when concatenating strings, so the inner loop of the inner1 function should be written as:
var tstring = 'html code';
for (var j=0;j<50;j++) tstring += 'html code';
string += tstring + 'html code';

5 Posted by Vincenzo on 26 April 2005 | Permalink

When you use innerHTML with unknown-at-design-time text, you have to escape special characters using a function similar to Server.HTMLEncode.
Since Javascript doesn't have such native function, you have to code one in Javascript, and this will slow down the execution a lot.
The DOM createTextNode takes the plain text as parameter, so you don't have to escape anything.

6 Posted by Vincenzo on 26 April 2005 | Permalink

To Dean:
you are right on your second point, but it's not the only method to add rows to an existing table.
You can generate a *NEW* table using innerHTML of an hidden DIV, and move the rows from the generated table to the destination table using the DOM appendChild/insertBefore.