W3C DOM vs. innerHTML

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 from browser to browser.

Each of the test scripts creates a 50x50 table, all of whose cells are filled with one character, *. Then the time your browser needs is measured and compared to the time it needed to execute the other methods.

Experiments

Key

Fastest Fast OK Slow Very slow
index 100 index 101-200 index 201-500 index 500-5000 index 5001+

I did each test 10 times, and then used the index values for judging the relative speed of the various methods.
I added the rough index for each browser's slowest script, and for the Slow and Very Slow categories.

Method Time Average time Index Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.4 Safari 1.0 Opera 7.20
W3C DOM 1
Create all elements as they're needed

Test now
OK Slow (3000) Very slow (7000) Slowest (300) Fast OK
Earlier experiments clearly show that the fastest way to generate the table with pure W3C DOM methods is to use as little intermediary variables as possible and to append the table only after it has been created completely.
W3C DOM 2
Create elements once, then clone

Test now
OK Slow (3000) Slowest (9000) OK Fast OK
The next experiment creates only one tr element, one td element and one text nodes and clones them as often as necessary.
Table methods
Use W3C DOM table methods

Test now
Slowest (3500) Slowest (9200) Untestable OK OK Slowest (400)
The next experiment uses the W3C DOM table methods.
innerHTML 1
Concatenate a string

Test now
Fast Fast Fast Fastest Slowest (300) Fastest
innerHTML 2
Push strings into array, then join array

Test now
Fastest Fastest Fastest Fast Fastest Fast
Natively Explorer 5 doesn't support the push method. My quirksmode.js file contains functions that mimic this behaviour, though. The test uses these functions.
Method Time Average time Index Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.4 Safari 1.0 Opera 7.20

Absolute numbers

Below you find the execution times of the fastest scripts in each browser. Of course these numbers depend heavily on the computer you use, so I doubt you'll find the same values when you perform the tests.

Windows:

  1. Opera: 20 ms
  2. Explorer 6: 67 ms
  3. Explorer 5: 83 ms
  4. Mozilla: 145 ms

Mac:

  1. Explorer: 228 ms
  2. Mozilla: 340 ms
  3. Safari: 581 ms

Discussion

The most obvious conclusion of these tests is that innerHTML is faster than "real" W3C DOM methods in all browsers. Only Safari partially disturbs this trend. The W3C DOM table methods are slow to very slow, especially in Explorer.

More than once people said that creating elements only once and then cloning them when necessary leads to a dramatic performance improvement. These tests don't show anything of that kind. Although in most browsers cloning is minimally faster than creating, the difference between the two methods is small.

By browser

Explorer Windows: What amazes me most is the huge difference between Explorer 5 and 6. Although 6 executes the innerHTML scripts slightly faster than 5, it is incomparably slower in executing all other scripts. Where 5 shows an index number of around 300 for the "real" W3C DOM scripts, 6 shows an index of about 3000! Maybe this is caused by my running multiple Explorers on one computer, I don't know. Explorer 5.5 is quite close to 5.0.

Mozilla: Rather to my surprise Mozilla is the slowest browser on Windows when we compare its fastest script to the fastest scripts of the other browsers. On the other hand it shows the least difference between the methods, its slowest script is only 3 times slower than its fastest.

Opera: Opera is by far the quickest browser on Windows, leaving Explorer and Mozilla to eat its dust. Although its slowest script has an index of about 450, it's still faster than Mozilla's fastest script and roughly equal to Explorer fastest script.
Opera's performance has changed considerably since I did my earlier experiments. Then the W3C table methods were fastest, now they're the slowest method.

Explorer Mac: Explorer Mac is a very slow browser when it comes to W3C DOM scripts. Its good score on the innerHTML tests surprises me. When we try anything else, though, Explorer Mac becomes mired in its bad W3C DOM implementation. It takes about 20 seconds to execute any "real" W3C DOM script, coming to a huge index of more than 9000.

Safari: Although Safari keeps up very well, I noticed that it becomes gradually slower when you perform a test more than once. I suspect there's still a slight bug somewhere (garbage collection?) that causes its performance to degrade over the long run. On the other hand, it might be a problem of my specific Safari install.

The test table

Remove