CSS3 Query Selectors Specificity and Performance

Yesterday, on #yui on freenode, Anthony Pipkin answered someone who was trying to select a node via it’s ‘name’ property with the suggestion of using Y.all(‘[name=blargh]’). I asked him why he didn’t use input, to which he responded that he was trying to include textarea and select elements as well, which was an absolutely fair point. However, I was immediately curious about the *performance hit the selector took using ‘*’ instead of ‘input’ or something more specific.

So, off the jsperf I went to build two test cases for each jQuery and YUI, one each for the specific selector (‘input[name=foo]’) and for the generic selector (‘*[name=foo]’). I encourage you to go run the test to update the Browserscope numbers.

The findings, in short, were straightforward. Using the specific selector was always faster, by a noticeable margin. In Firefox 4, it’s only about 5%, but in Chome 7, that goes to around 14%, and nearly 30% slower in IE8.

Now, for a one-use selector, this may not be that big of an issue, but any repeating selector should absolutely be as specific as possible, and it’s worth noting that a poorly chosen selector really can have significant performance impact.

As an aside, you’ll likely notice that in current versions of both YUI and jQuery, YUI outperforms jQuery by a noticeable margin.