From : 2009/04/jquery-performance-rules/

Once upon a time, all we needed to worry about was reducing Bytes and Requests and playing around with load order to make things faster. Nowadays, we are increasingly impacting one more major component in performance – CPU utilization. Using jQuery and other frameworks that make selecting nodes and DOM manipulation easy can have adverse affects if you’re not careful and follow some simple practices for reducing the work the browser has to do.

1. Always Descend From an #id
2. Use Tags Before Classes
3. Cache jQuery Objects
4. Harness the Power of Chaining
5. Use Sub-queries
6. Limit Direct DOM Manipulation
7. Leverage Event Delegation (a.k.a. Bubbling)
8. Eliminate Query Waste
9. Defer to $(window).load
10. Compress Your JS
11. Learn the Library

1. Always Descend From an #id

The fastest selector in jQuery is the ID selector (de<$('#someid')de<). This is because it maps directly to a native JavaScript method, de<getElementById()de<.

Selecting Single Elements

<div id="content">
 <form method="post" action="">
 <h2>Traffic Light</h2>
 <ul id="traffic_light">
  <li><input type="radio" class="on" name="light" value="red" /> Red</li>
  <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
  <li><input type="radio" class="off" name="light" value="green" /> Green</li>
 </ul>
 <input class="button" id="traffic_button" type="submit" value="Go" />
 </form>
</div>

Selecting the button like this is slower:

var traffic_button = $('#content .button');

Instead, select the button directly:

var traffic_button = $('#traffic_button');

Selecting Multiple Elements

Once we start talking about selecting multiple elements, we are really talking about DOM traversal and looping, something that is slow. To minimize the performance hit, always descend from the closest parent ID:

var traffic_lights = $('#traffic_light input');

2. Use Tags Before Classes

The second fastest selector in jQuery is the Tag selector (de<$('head')de<). Again, this is because it maps to a native JavaScript method, de<getElementsByTagName()de<

.

<div id="content">
 <form method="post" action="">
 <h2>Traffic Light</h2>
 <ul id="traffic_light">
  <li><input type="radio" class="on" name="light" value="red" /> Red</li>
  <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
  <li><input type="radio" class="off" name="light" value="green" /> Green</li>
 </ul>
 <input class="button" id="traffic_button" type="submit" value="Go" />
 </form>
</div>

Always prefix a class with a tag name (and remember to descend from an ID):

var active_light = $('#traffic_light input.on');

Note: The class selector is among the slowest selectors in jQuery; in IE it loops through the entire DOM. Avoid using it whenever possible. Never prefix an ID with a tag name. For example, this is slow because it will loop through all de<<div>de< elements looking for the ‘content’ ID:

var content = $('div#content');

Along the same lines, it is redundant to descend from multiple IDs:

var traffic_light = $('#content #traffic_light');

3. Cache jQuery Objects

Get in the habit of saving your jQuery objects to a variable (much like our examples above). For example, never (eeeehhhhver) do this:

$('#traffic_light input.on).bind('click', function(){});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

Instead, first save the object to a local variable, and continue your operations:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

Tip: Since we want to remember that our local variable is a jQuery wrapped set, we are using $ as a prefix. Remember, never repeat a jQuery selection operation more than once in your application.

Bonus Tip – Storing jQuery results for later