JQuery Find Performance

Question

I am finding that this:

var $colSelect = $('#stuff').find('.things');
$($colSelect).find('img, input, select').addClass("foo");

is slower then this:

var $colSelect = $('#stuff').find('.things');
$($colSelect).find('img').addClass("foo");                       
$($colSelect).find('input').addClass("foo");                 
$($colSelect).find('select').addClass("foo");

Can anyone help me understand why that is the case? In specific I am noticing the performance increase in IE8.

Answer 1

My guess would be that for the first selector, jQuery must parse the selector, call JavaScript's getElementsByTagName for each and join the results (maybe even ordering them in the order of their position in the DOM).

The second case has straight-forward calls to JavaScript's getElementsByTagName, with no other operations necessary.

This page compares performances: http://jsperf.com/jquery-selector-performance-problems

Answer 2

Update 2: Modified to reflect the grid like nature of what you have. Here's my findings with jQuery 1.7.1 (one is your top code, two is your bottom code). I took only the top 5 slowest things because everything else didn't matter.

As you can see, the reason that one is probably slower than the other is due to the function sortOrder (minified as U) and/or Array.sort. Both of these don't even show up in Two. The issue definately is with having to go back and sort the results. makeArray (minified as s above) seems to take less time in 1, but that doesn't offset the sorting that has to be done.

Update: I created a jsFiddle to play around with it, and I'm not seeing a noticeable difference in IE8 between the two methods. Perhaps more context is needed into what this page looks like / what styles are being applied. It may have something to do with the browser rendering which is causing your code to act differently.

IE8 has a built in profiler.

1. Go to the Developer Tools (F12)
2. Click the "Profile" tab
3. Click the "Start" button
4. Do the JavaScript work taht you need done
5. Click stop and analyze the findings. Look for things that are slow. Rework them.
6. Repeat

Tips for making your javascript better. Try not to call $($colSelect) all of the time. Save it to a variable like so.

var $colSelect = $($('#stuff').find('.things'));