Access Keys:
Skip to content (Access Key - 0)
Home (Access Key - 1)
All spaces... (Access Key - 3)
Log in (Access Key - 5)
Sign up (Access Key - 6)
Toggle Sidebar

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.

<< January 2008 >>
Sun Mon Tue Wed Thu Fri Sat
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

Next Post New website design No. 3
Previous Post DateJS, Compression, Performance

Toggle Sidebar
Added by Guy Fraser on Jan 12, 2008 04:41, last edited by Guy Fraser on Jan 12, 2008 05:30
Anonymous

Also I think find is generally an expensive operation. Using filter whenever possible boosts the performance substantially


Adaptavist Theme Builder Powered by Atlassian Confluence