JavaScript Tests 1 – DOM lookup
Posted on March 17, 2010José Serrano Núñez Frontend Engineer
As shown in below tables, there are different sets of time for each test in particular, this is because each test has been timed performing on a different DOM tree for the sake of completion and complexity. Rough estimates on the DOM elements used in the site are up to 3500 at its highest and so the heaviest tests timed are performed on an approximate DOM tree size looped a thousand times (3.5K * 1K). Tests range from 13 (static DOM tree), to 1.5k and 3.5k elements (the last two DOM trees have an approximate number of elements since they are generated randomly).
The methods timed are commonly used, as are getElementsByTagName, getElementById, walk the tree, etc. In both their native and jQuery implementations (since jQuery is a very commonly used spell within our scripts).
Notice:
The tests performed on the native and jQuery methods are considerably different in terms of DOM tree size (browsers lock up when jQuery tests are performed with as many nodes as the native tests have). Although valid metrics can still be taken with less number of nodes (13~500 nodes).
i. Firefox 3.0
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName | 0.19 | 5263.157 | 3.057 | 190 |
| getElementById | 0.044 | 22727.272 | 13.204 | 44 |
| getElementByClass | 0.064 | 15625 | 9.078 | 64 |
| walking | 0.581 | 1721.170 | – | 176 |
DOM tree size: 13 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
10.76 |
92.936 |
2.960 |
10760 |
| getElementById |
8.741 |
114.403 |
3.644 |
8741 |
| getElementByClass | 7.699 | 129.886 | 4.137 | 7699 |
| walking |
31.855 |
31.392 |
– |
31855 |
DOM tree size: 1765 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
23.515 |
42.526 |
2.698 |
23515 |
| getElementById |
17.991 |
55.583 |
3.526 |
17991 |
| getElementByClass | 15.367 | 65.074 | 4.129 | 15367 |
| walking |
63.454 |
15.759 |
– |
63454 |
DOM tree size: 3513 Elements
ii. Firefox 3.5
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName | 0.164 |
6097.560 |
1.073 |
164 |
| getElementById | 0.021 | 47619.047 |
8.380 |
21 |
| getElementByClass | 0.018 | 55555.555 | 9.777 | 18 |
| walking | 0.176 |
5681.181 |
– | 176 |
DOM tree size: 13 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
10.368 |
96.450 |
0.810 |
10368 |
| getElementById |
9.037 |
110.656 |
0.930 |
9037 |
| getElementByClass | 1.844 | 542.299 | 4.559 | 1844 |
| walking |
8.408 |
118.934 |
– |
8408 |
DOM tree size: 1752 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
20.115 |
49.714 |
0.852 |
20115 |
| getElementById |
17.102 |
58.472 |
1.003 |
17102 |
| getElementByClass | 4.263 | 234.576 | 4.024 | 4263 |
| walking |
17.156 |
58.288 |
– |
17156 |
DOM tree size: 3506 Elements
iii. Internet Explorer 6
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
0.281 |
3558.718 |
2.334 |
281 |
| getElementById |
0.344 |
2906.976 |
1.906 |
344 |
| getElementByClass | 0.172 | 5813.953 | 3.813 | 172 |
| walking |
0.656 |
1524.390 |
– |
656 |
DOM tree size: 13 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementByTagName | 7.069 | 131.423 | 3.725 | 7609 |
| getElementById |
75.531 |
13.239 |
0.375 |
75531 |
| getElementByClass |
35.875 |
27.874 |
0.790 |
35875 |
| walking |
28.344 |
35.280 |
– |
28344 |
DOM tree size: 370 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementByTagName | 15.188 | 65.841 | 4.230 | 15188 |
| getElementById |
225.719 |
4.430 |
0.284 |
225719 |
| getElementByClass |
126.796 |
7.886 |
0.506 |
126796 |
| walking |
64.25 |
15.564 |
– |
64250 |
DOM tree size: 719 Elements
iv. Internet Explorer 7
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
0.234 |
4273.504 |
1.602 |
234 |
| getElementById |
0.11 |
9090.909 |
3.409 |
110 |
| getElementByClass | 0.078 | 12820.512 | 4.807 | 78 |
| walking |
0.375 |
2666.666 |
– |
375 |
DOM tree size: 13 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementByTagName | 23.985 | 41.692 | 2.446 | 23985 |
| getElementById |
154.125 |
6.488 |
0.380 |
154125 |
| getElementByClass |
62.562
|
15.98 |
0.938 |
62562 |
| walking |
58.688 |
17.039 |
– |
58688 |
DOM tree size: 1763 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementByTagName | 49.219 | 20.317 | 2.379 | 49219 |
| getElementById |
565.75 |
1.767 |
0.206 |
565750 |
| getElementByClass |
229.516
|
4.356 |
0.510 |
229516 |
| walking |
117.093 |
8.540 |
– |
117093 |
DOM tree size: 3513 Elements
v. Google Chrome 3.0
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
0.128 |
7812.5 |
6.937 |
128 |
| getElementById |
0.035 |
28571.428 |
25.371 |
35 |
| getElementByClass | 0.013 | 76923.076 | 68.307 | 13 |
| walking |
0.888 |
1126.126 |
– |
888 |
DOM tree size: 13 Elements
| Method/Times |
Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
7.944 |
125.881 |
2.887 |
7944 |
| getElementById |
3.547 |
281.928 |
25.371 |
3547 |
| getElementByClass | 1.532 | 652.741 | 68.307 | 1532 |
| walking |
22.94 |
43.591
|
– |
22940 |
DOM tree size: 1751 Elements
| Method/Times | Time/Iteration (-better) |
Executions Per Second (+ better) |
Times faster than walking (+ better) |
Total Execution Time (- better) |
| getElementsByTagName |
15.976 |
62.593 |
2.988 |
15976 |
| getElementById |
7.393 |
135.263 |
6.457 |
7393 |
| getElementsByClass | 2.646 | 377.928 | 18.043 | 2646 |
| walking |
7.743 |
20.945
|
– |
47743 |
DOM tree size: 3514 Elements
In Firefox, using the ‘getElementByClass’ method is faster. It is proportionally ten times faster than walking the whole DOM tree in small pages, and around four times faster for really big DOM trees. Another noticeable fact is that as the page grows in DOM nodes, retrieving a node by its id levels with the time needed to walk the whole node in search of that particular id.
Using Internet Explorer: getting nodes by the ‘getElementByClass’ is also fastest but for a small page with very few DOM elements. When the DOM node number rises, using the ‘getElementsByTagName’ is preferable.
Google Chrome is faster getting nodes by their class in all of the measures taken. It is also the fastest of all the targeted browsers.
