Good ways to improve jQuery selector performance?

Question

I'm looking for any way that I can improve the selector performance of a jQuery call. Specifically things like this:

Is $("div.myclass") faster than $(".myclass")

I would think it might be, but I don't know if jQuery is smart enough to limit the search by tag name first, etc. Anyone have any ideas for how to formulate a jQuery selector string for best performance?

Answer 1

In order to fully comprehend what is faster, you have to understand how the CSS parser works.

The selector you pass in gets split into recognizable parts using RegExp and then processed piece by piece.

Some selectors like ID and TagName, use browser's native implementation which is faster. While others like class and attributes are programmed in separately and therefore are much slower, requiring looping through selected elements and checking each and every class name.

So yes to answer your question:

$('tag.class') is faster than just $('.class'). Why? With the first case, jQuery uses the native browser implementation to filter the selection down to just the elements you need. Only then it launches the slower .class implementation filtering down to what you asked for.

In the second case, jQuery uses it's method to filter each and every element by grabbing class.

This spreads further than jQuery as all javascript libraries are based on this. The only other option is using xPath but it is currently not very well supported among all browsers.

Answer 2

Another place to look for performance information is Hugo Vidal Teixeira's Performance analysis of selectors page.

http://www.componenthouse.com/article-19

This gives a good run down of speeds for selector by id, selector by class, and selector prefixing tag name.

The fastest selectors by id was: $("#id")

The fastest selector by class was: $('tag.class')

So prefixing by tag only helped when selecting by class!

Answer 3

There is no doubt that filtering by tag name first is much faster than filtering by classname.

This will be the case until all browsers implement getElementsByClassName natively, as is the case with getElementsByTagName.

Answer 4

Here is how to icrease performance of your jQuery selectors:

• Select by #id whenever possible (performance test results ~250 faster)
• Specify scope of your selections ($('.select', this))

Answer 5

I'll add a note that in 99% of web apps, even ajax heavy apps, the connection speed and response of the web server is going to drive the performance of your app rather than the javascript. I'm not saying the you should write intentionally slow code or that generally being aware of what things are likely to be faster than others isn't good.

But I am wondering if you're trying to solve a problem that doesn't really exist yet, or even if you're optimizing for something that might change in the near future (say, if more people start using a browser that supports getElementsByClassName() function referred to earlier), making your optimized code actually run slower.

Answer 6

A great tip from a question I asked: Use standard CSS selectors wherever possible. This allows jQuery to use the Selectors API. According to tests performed by John Resig, this results in near-native performance for selectors. Functions such as :has() and :contains() should be avoided.

From my research support for the Selectors API was introduced with jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1.