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.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

More information about formatting options