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