Steve Souders' aforementioned tests use JavaScript’s new Date()
. However, nowadays, modern browsers (iOS/Safari were a notable exception at the time of testing) support the Navigation Timing API (https://www.w3.org/TR/navigation-timing/) which gives us a more accurate measure we can use. For the tests, I implemented it like this:
<script> ;(function TimeThisMother() { window.onload = function(){ setTimeout(function(){ var t = performance.timing; alert("Speed of selection is: " + (t.loadEventEnd - t.responseEnd) + " milliseconds"); }, 0); }; })(); </script>
This lets us limit the timing of the tests between the point all assets have been received (responseEnd
) and the point the page is rendered (loadEventEnd
).
So, I set up a very simple test. 20 different pages, all with an identical, enormous DOM, made up of 1000 identical chunks of this markup:
<div class="tagDiv wrap1"> <div class="tagDiv layer1" data-div="layer1"> <div class="tagDiv layer2"> <ul class="tagUl"> <li class="tagLi"><b class="tagB"><a href="/" class="tagA link" data-select="link">Select</a></b></li> </ul> </div> </div> </div>
20 different CSS selection methods were tested to colour the inner most nodes red. Each page differed only in the rule applied to select the inner most node within the blocks. Here were the different selectors tested and a link to the the test page for that selector:
Data attribute: https://benfrain.com/selector-test/01.html
Data attribute (qualified): https://benfrain.com/selector-test/02.html
Data attribute (unqualified but with value): https://benfrain.com/selector-test/03.html
Data attribute (qualified with value): https://benfrain.com/selector-test/04.html
Multiple data attributes (qualified with values): https://benfrain.com/selector-test/05.html
Solo pseudo selector (e.g.
:after
): https://benfrain.com/selector-test/06.htmlCombined classes (e.g.
class1.class2
): https://benfrain.com/selector-test/07.htmlMultiple classes: https://benfrain.com/selector-test/08.html
Multiple classes with child selector: https://benfrain.com/selector-test/09.html
Partial attribute matching (e.g.
[class<sup>ˆ=</sup>“wrap”]
): https://benfrain.com/selector-test/10.htmlnth-child selector: https://benfrain.com/selector-test/11.html
nth-child selector followed by another nth-child selector: https://benfrain.com/selector-test/12.html
Insanity selection (all selections qualified, every class used e.g.
div.wrapper
> div.tagDiv > div.tagDiv.layer2 > ul.tagUL > li.tagLi > b.tagB > a.TagA.link
): https://benfrain.com/selector-test/13.htmlSlight insanity selection (e.g.
.tagLi .tagB a.TagA.link
): https://benfrain.com/selector-test/14.htmlUniversal selector: https://benfrain.com/selector-test/15.html
Element single: https://benfrain.com/selector-test/16.html
Element double: https://benfrain.com/selector-test/17.html
Element treble: https://benfrain.com/selector-test/18.html
Element treble with pseudo: https://benfrain.com/selector-test/19.html
Single class: https://benfrain.com/selector-test/20.html
The test was run 5 times on each browser and the result averaged across the 5 results. The browsers tested:
Chrome 34.0.1838.2 dev
Firefox 29.0a2 Aurora
Opera 19.0.1326.63
Internet Explorer 9.0.8112.16421
Android 4.2 (7" tablet)
A previous version of Internet Explorer (rather than the latest Internet Explorer available to me) was used to shed some light on how a non evergreen browser performed. All the other browsers tested received regular updates so I wanted to be sure that there wasn't a considerable difference in the way modern regularly updating browsers deal with CSS selectors and how slightly older ones do.
Note
Want to try the same tests out for yourself? Go and grab the files from this GitHub link: https://github.com/benfrain/css-performance-tests. Just open each page in your browser of choice (remember the browser must support the Network Timing API to alert a response). Also be aware that when I performed the test I discarded the first couple of results as they tended to be unusually high in some browsers.
Tip
When considering the results, don't consider one browser against another. That is not the purpose of the tests. The purpose is purely to try and evaluate the comparative difference in selection speed between the different selectors employed on each browser. For example, is selector 3 any faster than selector 7 on any browser? Therefore, when looking at the table, it makes more sense to look down the columns than across the rows.
Here are the results. All times in milliseconds:
Test |
Chrome 34 |
Firefox 29 |
Opera 19 |
IE 19 |
Android 4 |
1 |
56.8 |
125.4 |
63.6 |
152.6 |
1455.2 |
2 |
55.4 |
128.4 |
61.4 |
141 |
1404.6 |
3 |
55 |
125.6 |
61.8 |
152.4 |
1363.4 |
4 |
54.8 |
129 |
63.2 |
147.4 |
1421.2 |
5 |
55.4 |
124.4 |
63.2 |
147.4 |
1411.2 |
6 |
60.6 |
138 |
58.4 |
162 |
1500.4 |
7 |
51.2 |
126.6 |
56.8 |
147.8 |
1453.8 |
8 |
48.8 |
127.4 |
56.2 |
150.2 |
1398.8 |
9 |
48.8 |
127.4 |
55.8 |
154.6 |
1348.4 |
10 |
52.2 |
129.4 |
58 |
172 |
1420.2 |
11 |
49 |
127.4 |
56.6 |
148.4 |
1352 |
12 |
50.6 |
127.2 |
58.4 |
146.2 |
1377.6 |
13 |
64.6 |
129.2 |
72.4 |
152.8 |
1461.2 |
14 |
50.2 |
129.8 |
54.8 |
154.6 |
1381.2 |
15 |
50 |
126.2 |
56.8 |
154.8 |
1351.6 |
16 |
49.2 |
127.6 |
56 |
149.2 |
1379.2 |
17 |
50.4 |
132.4 |
55 |
157.6 |
1386 |
18 |
49.2 |
128.8 |
58.6 |
154.2 |
1380.6 |
19 |
48.6 |
132.4 |
54.8 |
148.4 |
1349.6 |
20 |
50.4 |
128 |
55 |
149.8 |
1393.8 |
Biggest Diff. |
16 |
13.6 |
17.6 |
31 |
152 |
Lowest |
13 |
6 |
13 |
10 |
6 |
The Biggest Diff. row shows the difference in milliseconds between the fastest and slowest selector. Of the desktop browsers, IE9 stands out as having the biggest difference between fastest and slowest selectors at 31 ms. The others are all around half of that figure. However, interestingly there .
I was interested to note that the slowest selector type differed from browser to browser. Both Opera and Chrome found the insanity selector (test 13) the hardest to match (the similarity between Opera and Chrome here perhaps not surprising given they share the blink (http://www.chromium.org/blink) engine), while Firefox struggled with a single pseudo selector (test 6 (https://benfrain.com/selector-test/06.html)), as did the Android 4.2 device (a Tesco hudl 7" tablet). Internet Explorer 9's Achilles heel was the partial attribute selector (test 10 (https://benfrain.com/selector-test/10.html)).