jQuery Performance Guide

0

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):

  1. 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:

  1. var $active_light = $('#traffic_light input.on');
  2. $active_light.bind('click', function(){...});
  3. $active_light.css('border', '3px dashed yellow');
  4. $active_light.css('background-color', 'orange');
  5. $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.

Speak your mind