I just came across a great blog post linked from HN with 28 jQuery performance tips. There are a few tips from the blog post that we disagree with, but here are some of the best tips from the post:

  • The fastest way to select an element in jQuery is by the element ID.
  • The second fastest way to select an element is by tags.
    • var receiveNewsletter = jQuery(‘#nslForm input.on’);
  • The slowest way to select elements is by class name.
  • When traversing elements, use find instead of multiple items in a selector. It is slightly faster.
    • var divs = jQuery(‘.testdiv’, ‘#pageBody’); // 2353 on Firebug 3.6
    • var divs = jQuery(‘#pageBody’).find(‘.testdiv’); // 2324 on Firebug 3.6 – The best time
  • Cache elements in jQuery that you use often.
    • var header = jQuery(‘#header’);
    • var divs = header.find(‘div’);
  • Use the data() function to store information on your elements for later.
    • jQuery(‘#head’).data(‘name’, ‘value’);
    • //Later in the flow
    • jQuery(‘#head’).data(‘name’);
  • Always load the jQuery library from Google’s CDN
    • https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
To view all of the performance tips, please visit jQuery Performance Tips Cheat Sheet