Testing selector speed

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:

1. Data attribute: https://benfrain.com/selector-test/01.html

2. Data attribute (qualified): https://benfrain.com/selector-test/02.html

3. Data attribute (unqualified but with value): https://benfrain.com/selector-test/03.html

4. Data attribute (qualified with value): https://benfrain.com/selector-test/04.html

5. Multiple data attributes (qualified with values): https://benfrain.com/selector-test/05.html

6. Solo pseudo selector (e.g. :after): https://benfrain.com/selector-test/06.html

7. Combined classes (e.g. class1.class2): https://benfrain.com/selector-test/07.html

8. Multiple classes: https://benfrain.com/selector-test/08.html

9. Multiple classes with child selector: https://benfrain.com/selector-test/09.html

10. Partial attribute matching (e.g. [class<sup>ˆ=</sup>“wrap”]): https://benfrain.com/selector-test/10.html 

11. nth-child selector: https://benfrain.com/selector-test/11.html

12. nth-child selector followed by another nth-child selector: https://benfrain.com/selector-test/12.html

13. 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.html

14. Slight insanity selection (e.g. .tagLi .tagB a.TagA.link): https://benfrain.com/selector-test/14.html

15. Universal selector: https://benfrain.com/selector-test/15.html

16. Element single: https://benfrain.com/selector-test/16.html

17. Element double: https://benfrain.com/selector-test/17.html

18. Element treble: https://benfrain.com/selector-test/18.html

19. Element treble with pseudo: https://benfrain.com/selector-test/19.html

20. 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 difference between fastest and slowest selector

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 .

The slowest selector

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)).