Www ( Tag # Lightsoffnow y Lightsoffnow i Detection t Detection lasearchssearcha Www c Www b Detection e Detection r1 1w searcha Face e Tag   Lightsoffnow s Detection a Detection c Lightsoffnow r Face Lisearchh Lightsoffnow sosearchfnawh' Lightsoffnow l1csearch' Face   Face u Tag csearchisearchnsearch)search})search

Instead, we should listen for the click event at the parent level:

$('#myList).bind('click', function(e){}
});

The parent node acts as a dispatcher and can then do work based on what target element triggered the event. If you find yourself binding one event listener to many elements, you are doing something wrong (and slow).

8. Eliminate Query Waste

Although jQuery fails nicely if it does not find any matching elements, it still takes time to look for them. If you have one global JavaScript for your entire site, it may be tempting to throw every one of your jQuery functions into de<$(document).ready(function(){})de<. Don’t you dare. Only run functions that are applicable to the page. The most efficient way to do this is to use inline initialization functions so your template has full control over when and where JavaScript executes. For example, in your “article” page template, you would include the following code before the body close:

<script type="text/javascript>
mylib.article.init();
</script>
</body>

If your page template includes any variety of modules that may or may not be on the page, or for visual reasons you need them to initialize sooner, you could place the initialization function immediately after the module.

<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>
<script type="text/javascript>
mylib.traffic_light.init();
</script>

Your Global JS library would look something like this:

var mylib =
{}
 },
 traffic_light :
 {}
 }
}

9. Defer to de<$(window).loadde<

There is a temptation among jQuery developers to hook everything into the de<$(document).readyde< pseudo event. After all, it is used in most examples you will find. Although de<$(document).readyde< is incredibly useful, it occurs during page render while objects are still downloading. If you notice your page stalling while loading, all those de<$(document).readyde< functions could be the reason why. You can reduce CPU utilization during the page load by binding your jQuery functions to the de<$(window).loadde< event, which occurs after all objects called by the HTML (including de<<iframe>de< content) have downloaded.

$(window).load(function(){});

Superfluous functionality such as drag and drop, binding visual effects and animations, pre-fetching hidden images, etc., are all good candidates for this technique.

10. Compress Your JS

Okay, this isn’t jQuery related, but I had to include it. There is a tendency to make JavaScript functions and variables overly descriptive, which is essential for developers but irrelevant to users. No more excuses, it’s time to build JS compression into our workflows. Comment the heck out of your code, and run it through a compression tool before launching to production. Use YUICompressor to squeeze out wasteful bytes from your code. In our experience, it safely compresses JavaScript as small as it can possibly get without a CPU penalty (such as Base62 encoding with Packer). Tip: For maximum compression in YUICompressor, always declare your variables (e.g. var my_long_variable_name;).

11. Learn the Library

Print out this jQuery 1.3 cheat sheet, and make it a goal to eventually understand what each function does. If you find yourself repeating yourself repeating, there is probably an easier (and more efficient) way.