jQuery Performance Guide

There is a very well written guide for jQuery coders that addresses best practice topics for performance. Some key items that I pulled directly from the guide that can be easily integrated into most front end designer's programming habits are:

1. Always Descend From an #id

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

2. Use Tags Before Classes

The second fastest selector in jQuery is the Tag selector ($('head')). Again, this is because it maps to a native JavaScript method, getElementsByTagName().
Always prefix a class with a tag name (and remember to descend from an ID):

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

3. Cache jQuery Objects

Get in the habit of saving your jQuery objects to a variable.
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');

For those of you who want to delve in a little deeper, you should definitely head over to www.artzstudio.com for the complete post. There is a lot of advanced material not covered here with many example code snippets to follow.

0 Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

More information about formatting options