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
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.
var a = document.createElement('TR'); x.appendChild(a);but
insertCell()methods. This script has by far the shortest number of lines.
pushsmall 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||Method||Time||Average time||Index||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.
Remove test table.
Some random browser facts: