jQuery Performance Tips

Posted by Eric Stolz in jQuery

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