Some quick tips for jQuery performance

I was speaking to Peter Reiser earlier today about jQuery performance and mentioned a couple of tips that he asked me to blog about...

Give the latest nightly build a try

People testing the latest nightly builds are all saying that jQuery 1.2.2 is definitely faster than 1.2.1.

More info on the nightly builds and SVN here: http://docs.jquery.com/Downloading_jQuery

Tune your selectors

If you've got big web pages it's well worth making your CSS selectors more specific so they do less work.

First, try and limit them to a sub-section of the DOM, for example:

jQuery('.foo',context).whatever();

Where context is either a DOM element or a jQuery object. This instantly shrinks the number of elements jQuery has to wade through.

Second, think about the actual selector - is there something more specific you could use to reduce the number of elements searched?

For example, if you use '.foo' as shown above, jQuery has to search every element just to see if it has a "foo" class. If you know that you only want to find <div> elements with the "foo" class, use this instead:

jQuery('div.foo',context).whatever();

Learn from the speed tests

Before doing this, please note that the speed test results are very easily misinterpreted. People often think one library is worse than another if it seems to have poor speed test performance which is a naive assumption to make - the speed tests don't show real-world scenarios for which jQuery is superb and possibly only beaten by ExtJS.

Here's the speed test: http://www.kenzomedia.com/speedtest/

What you're looking for are the selectors that take the shortest time in jQuery - identify the trends and find out what's faster and slower in terms of the selector syntax then see if you can use that to improve your selectors.