11 jQuery performance tips2011-08-10 19:56:54 0 comments
Today I've watched a slides from a great presentation whose author is Addy Osmani. Slides can be found here: jQuery Proven Performance Tips And Tricks (Slides). I strongly recommend watching it (with all linked tests on http://jsperf.com) and if necessary read my short summary posted bellow.
Stay up to date
If it's possible try to use the latest version of jQuery.
If you're updating library check if all plug-ins still work, if not - look for a plug-in updates.
New releases of jQuery can be divided into two groups. If a second number is changed (1.3 => 1.4) we can expect a new features and a performance improvements, also a chance of lack of compatibility with currently used plug-in is quite high. If a third number is changed it means we're dealing with a bug fixes so some problems can be fix and there shouldn't be any problems with a compatibility. Of course we shouldn't expect any speed improvements.
Use the fastest selectors
The best selectors are those using ID. jQuery can take an advantage of plain JS method getElementById().
Second in a line are element selectors using native getElementByTagName() method.
Selectors based on classes are not so great even if modern browser have native getElementsByClassName() method.
Choosing the best method for obtaining children and parents
If you want to find a children of a given element you got at least a few methods to chose from. You can use context (created or cached), children() method, find() method or use all kinds of selectors based on CSS.
According to Addy Osmani find() method used on a cached parent element is generally the fastest one. It'll be the best in most cases but really it depends on situation... so to be sure, you have to check it anyway.
For simple task such as retrieving value of ID attribute it's faster to do it by yourself in pure JS that doing it in jQuery which will do it in JS anyway spending more time on it.
Traversing through DOM tree can be time-consuming task so it's better to avoid it. Instead of creating the same element over and over again try to cache it by assigning it to a JS variable. Next time you'll be using this element, DOM traversing will be omitted.
Use method chaining
Most of jQuery methods return a jQuery objects. It means that immediately after one method you can call another method on the object returned by the first method. Sounds complicated? Please look at example:
$('div').find('span') .addClass('hidden') .fadeOut();
It's clearer way of writing code and it's got a better performance.
For mass event creating use delegate() method
Watch out for adding elements to DOM
Don't append new elements if you are looking for a place to store data. Use a data() method instead.
When you're append an element try to do it on a cached element. Beside that do it once with prepared string. Look at this performance test: http://jsperf.com/string-concat-single-append-vs-multiple-append
Try to use detach() method.
Use data() method in these way:
$.data('#elem', key, value)rather then this way:
Use native loop rather than $.each()
It's better to take advantage of selector engine than use loops. If you have to use a loop try the native one in the first place.
A great loops` compression: http://jsperf.com/jquery-each-vs-for-loop/24
Avoid creating unnecessary objects
$.text($elem)is much better than this way:
DRY that is Don't Repeat Yourself
More repeated code means greater size, greater mess and more problems with maintenance. Looks quite obvious.