W3C DOM vs. innerHTML, old

This page is no longer maintained. See the new experiment page for up-to-date figures.

The question for 2003: What shall we do with the W3C DOM?

This is a test page intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly for the various browsers.

Overall conclusion: None

Experiment

Each of the four links in the table generates a new, huge table of 50 x 50 TD's. The questions before the house today is: which method is faster?

If you wish me to test another method, please send me a script that's as simple as possible and that looks like the scripts I already use. I'll add it to the page.

I use five techniques, three using the pure W3C DOM and two using innerHTML.

  1. In the first W3C DOM example I create a table outside the document. Then I append a TBODY and the various TR's and TD's. At the end of the script I append the TABLE to the document.
  2. The second W3C DOM example is the same, except that I append the TABLE to the document immediately after I create it.
  3. In the third W3C DOM example (written by Juan R. Pozo) I don't use intermediary variables. Not 
    var a = document.createElement('TR');
x.appendChild(a);
    but 
    x.appendChild(document.createElement('TR'));
  4. The fourth W3C DOM example uses the insertRow() and insertCell() methods. This script has by far the shortest number of lines.
  5. In the first innerHTML example I concatenate a huge string which at the end is written into the innerHTML of the document.
  6. In the second innerHTML example I push small strings ('</td>' and such) into an array. At the end I join this array to one string and write it into the innerHTML of the document.

Remove test table.

Test it MethodTimeAverage timeIndex Browsers
1) Test W3C DOM, append table after building its tree.
2) Test W3C DOM, append table immediately. Overall this is the slowest method:
Opera 7 (7 times slower)
Mozilla 1.1 (2.5 times slower)
Explorer 5 Mac (nearly 100 times)
Konqueror (10 times slower)
3) Test W3C DOM, don't use intermediary variables. This is the fastest method Konqueror.
4) Test W3C DOM table methods This is the fastest method in Opera 7.
This is the slowest method in Explorer 6 Windows (40 times slower). It doesn't work in Explorer Mac and Safari.
5) Test innerHTML with concatenation This is the fastest method in Mozilla 1.1 and Explorer 5 Mac and the slowest method in Safari (8 times slower).
6) Test innerHTML with push This is the fastest method in Explorer 6 Windows and Safari.
push() is not supported by Explorer 5.0 Windows and 5.x Mac.

Remove test table.

Some random browser facts: