Take the 2-minute tour ×

What are some quick tips for increasing jQuery performance?

share|improve this question

closed as primarily opinion-based by Will, brasofilo, Eric Brown, Andrew, Mario Jul 18 '13 at 21:26


Buying a new computer would be the obvious way :-) –  Joey Oct 19 '09 at 7:34
I think you would find several duplicates to this question by using search. –  Elzo Valugi Oct 19 '09 at 7:35
Put racing stripes on the side of your PC, that always helps. –  unrelativity Oct 19 '09 at 7:38
And paint it red! The red ones are the fastest! –  soulmerge Oct 19 '09 at 7:40

9 Answers 9

up vote 17 down vote accepted
  1. Prefer simple selection first only by ID, and second only by tag name. Selecting by class name or CSS selector requires jQuery to walk the DOM, while ID and tag map to "native" browser DOM functions (getElementById and getElementByTagName).
  2. Cache your jQuery objects as much as possible.
  3. Scope your operations to a root jQuery object. Rather than selecting elements individually, select a common ancestor element and use the find function to find elements within the scope of that elements children. This is really only optimal if you are performing some operations on the common ancestor anyway; otherwise the overhead of finding the ancestor and caching it may outweigh the benefit of scoped traversal.
  4. Don't use $.each(), use for(;;) instead. It's over ten times faster.
share|improve this answer
This should have been the accepted answer. +1 –  roosteronacid Oct 19 '09 at 14:31
Can you give an example of for(;;)? –  Vnuk Oct 19 '09 at 14:32
Here is a for(;;) based version of one of the examples for $.each() from the jQuery documentation [ docs.jquery.com/Utilities/jQuery.each ] : for(var i = 0; i < arr.length; i++){ var id = arr[i]; $("#" + id).text("My id is " + id + "."); if (id == "four") break; } –  G-Wiz Oct 19 '09 at 19:03
Of course we all know a decremented while loop can perform even faster than that! The beauty of each is the context in which the function is called (e.g. this === your element). –  Alex Sexton Oct 20 '09 at 22:01
Its mostly just for ease of use, having context is an easy way to maintain consistency. More importantly, each() is still chainable, which is key in jquery's api. –  Alex Sexton Oct 21 '09 at 16:17

Paul Irish recently did a presentation on performance at the jQuery Conference 2009. The slides are some of the most comprehensive that I have seen.


share|improve this answer
+1 - Some nice tips in there –  Russ Cam Oct 21 '09 at 10:34

Reference files on google's CDN so they load faster.

share|improve this answer
This isn't really the jQuery performance, isn't it? –  Tim Büthe Oct 19 '09 at 11:21
Wouldn't apply if you're developing on an intranet (users are in same building). Storing it on your own server would save them a trip to the internet. –  Nathan Long Oct 19 '09 at 15:40
@Nathan on an intranet, this would be the kind of thing to be stored on a proxy and so save them a trip as well, but take your point and some places wouldn't have a proxy –  dove Oct 20 '09 at 7:22

Rather than doing:


you can do:

share|improve this answer
Does that really increase performance? That is so kewl. –  jpartogi Oct 19 '09 at 10:01
Or if you can't do it all at once, put $("#foo") in a variable and use that rather than recreating $("#foo") every time. –  Chris Charabaruk Oct 19 '09 at 10:04
@jpartogi: jQuery creates a new object every time you pass a selector into $() but because its methods return this you can stack them like that. The trick here is to not create three different objects all for the same selector. –  Chris Charabaruk Oct 19 '09 at 10:05

it doeas apply always to common javascript: always cache, cache, cache e.g.:

var $this = $(this);
$this.css('width', parseInt($this.css('width')) + 20 + 'px');
share|improve this answer

It's not really possible to increase the speed of jQuery, it really depends on how efficient your code is, how efficient the browser's JS interpreter is and how quick the computer running the code is. You could perhaps try and rewrite jQuery to make it more efficient, but that's going to take time and it's most likely already quite optimised.

share|improve this answer
True if you're looking at drastic improvements in speed. However, there are simple tricks which do make for better execution, even if its only 100 or so milliseconds. –  Chris Charabaruk Oct 19 '09 at 10:08

One of the best ways to ensure efficiency is to make sure the *selector is targeting the element/class etc as specific as possible.


share|improve this answer

I think you asking for code optimization, but since the performance highly depends on the used JavaScript-Engine, I'd like to mention Google Chrome Frame.

share|improve this answer

Know when to use plain JavaScript instead of JQuery methods.

jQuery is an addition to JS+DOM, not a complete replacement for it. You don't have to use jQuery for every line of code you write. Some things are more succinctly expressed without it; many things are faster without it. Learn what the DOM makes available so you don't end up writing some of the sillier examples I've seen posted here.


var ix= $('#'+selectname).children().index($('#'+selectname+' option:selected'));

faster, easier to read, doesn't break with unexpected characters in ID:

var ix= document.getElementById(selectname).selectedIndex;
share|improve this answer
This can be condensed to: $('#someElement').find('option:selected'); –  PrgmrBill Oct 19 '09 at 15:40
