12

What are some quick tips for increasing jQuery performance?

dove
  • 20,469
  • 14
  • 82
  • 108
Shaitender Singh
  • 2,157
  • 5
  • 22
  • 35

9 Answers9

19
  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.
G-Wiz
  • 7,370
  • 1
  • 36
  • 47
  • 1
    Can you give an example of for(;;)? – Vnuk Oct 19 '09 at 14:32
  • 2
    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; } – G-Wiz Oct 19 '09 at 19:03
  • 2
    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
  • Good points, Alex. I just learned about the decremented while loop optimization. Aside from cosmetics, what advantage exists with 'this'? – G-Wiz Oct 21 '09 at 01:31
  • 1
    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
  • Great point about chainability. – G-Wiz Oct 21 '09 at 18:19
10

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.

http://paulirish.com/perf/
http://www.slideshare.net/paul.irish/perfcompression

oradwell
  • 392
  • 1
  • 12
Alex Sexton
  • 10,401
  • 2
  • 29
  • 41
8

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

dove
  • 20,469
  • 14
  • 82
  • 108
  • 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 07:22
8

Rather than doing:

$("#foo").addClass('test');
$("#foo").removeClass("bar");
$("#foo").slideUp('slow');

you can do:

$("#foo").addClass('test').removeClass('bar').slideUp('slow');
Ali
  • 261,656
  • 265
  • 575
  • 769
  • Does that really increase performance? That is so kewl. – Joshua Partogi Oct 19 '09 at 10:01
  • 3
    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
  • 2
    @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
3

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
  • 17,913
  • 6
  • 34
  • 52
2

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.

unrelativity
  • 3,670
  • 6
  • 38
  • 63
  • 1
    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
2

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
  • 24,079
  • 20
  • 92
  • 147
2

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
  • 528,062
  • 107
  • 651
  • 834
2

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
  • 62,884
  • 17
  • 92
  • 129