Question

I’m playing around with jsperf, querySelectorAll and data-xyz attributes.

Here is my current jsperf: jqmData vs. attribute selector

The critial piece is in the js test:

document.body.querySelectorAll('data-role')

Note I’m not using any square brackets [] and it still runs fine and beats all other selectors flat. I upped it to 200+ data-role elements on a page, and it still worked faster.

Then I tried on my own test page here (see Firebug) and alas… the nodeList is empty when I omit without square brackets.

Question:
What magic is jsperf using, so that the selector works there and not on my dummy website.

Answer 1

Your tests don’t check that the selector actually matched anything. No great surprise that querySelectorAll won when it knew there weren’t any data-role tags and so could immediately return an empty NodeList. 🙂

And indeed, if you add checks to each test to make sure it really got the right number of elements, the querySelectorAll one fails: http://jsperf.com/jqmdata-vs-attribute-selecotr/5