CODEWITHSUNDEEP
jqueryperformance
SergC
SergC

Reputation: 161

JQuery Find Performance

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.

Upvotes: 7

Views: 2669

Answers (4)

scottheckel
scottheckel

Reputation: 9244

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.

Results compareing the two algorithms

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'));

Upvotes: 2

Emre Erkan
Emre Erkan

Reputation: 8482

How about this?

$('#stuff .things')
    .find('img').addClass("foo").end() // .end() returns to '#stuff .things'
    .find('input').addClass("foo").end()
    .find('select').addClass("foo");

Upvotes: 0

Laurent
Laurent

Reputation: 3837

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

Upvotes: 3

Nakul
Nakul

Reputation: 1600

in 2nd case, the DOM subtree under $colSelect will be traversed thrice. Thats why it will be slow.

Upvotes: 0

Related Questions