What are some quick tips for increasing jQuery performance?
This isn't really the jQuery performance, isn't it?
Tim Büthe
2009-10-19 11:21:19
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
2009-10-19 15:40:58
@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
2009-10-20 07:22:29
+10
A:
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.
Alex Sexton
2009-10-19 07:39:11
+7
A:
Rather than doing:
$("#foo").addClass('test');
$("#foo").removeClass("bar");
$("#foo").slideUp('slow');
you can do:
$("#foo").addClass('test').removeClass('bar').slideUp('slow');
Click Upvote
2009-10-19 07:39:46
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
2009-10-19 10:04:10
@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
2009-10-19 10:05:52
+1
A:
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.
a2h
2009-10-19 07:40:20
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
2009-10-19 10:08:01
+2
A:
One of the best ways to ensure efficiency is to make sure the *selector is targeting the element/class etc as specific as possible.
*$(SELECTOR)
Mark Redman
2009-10-19 07:42:13
+12
A:
- 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).
- Cache your jQuery objects as much as possible.
- Scope your operations to a root jQuery object. Rather than selecting elements individually, select a common ancestor element and use the
findfunction 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. - Don't use
$.each(), usefor(;;)instead. It's over ten times faster.
gWiz
2009-10-19 08:32:24
Here is a for(;;) based version of one of the examples for $.each() from the jQuery documentation [ http://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; }
gWiz
2009-10-19 19:03:26
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
2009-10-20 22:01:14
Good points, Alex. I just learned about the decremented while loop optimization. Aside from cosmetics, what advantage exists with 'this'?
gWiz
2009-10-21 01:31:27
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
2009-10-21 16:17:29
+2
A:
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');
Juraj Blahunka
2009-10-19 08:57:28
+2
A:
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.
eg.:
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;
bobince
2009-10-19 11:10:24
+1
A:
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.
Tim Büthe
2009-10-19 11:26:46