What is the cost of finding a node in JQuery?

Question

I always save the result of the find() in order to avoid multiple sub tree traversal if I need the value several times:

var $a_bar = $('div.foo').find('a.bar');
$a_bar.removeClass(...);
// ... code here
$a_bar.bazz();

instead of

$('div.foo').find('a.bar').removeClass(...);
// ... code here
$('div.foo').find('a.bar').bazz();

I am wondering if it is not a micro-optimization... So what is the cost/complexity of finding a node in JQuery?

Answer 1

You can test it on js perf : http://jsperf.com/ Just create a test and run it.

I have created a small test here : http://jsperf.com/jquery-find55

On my browser (firefox 18) :

• test 1 (i save the find result) scores at 7,074 operations by second
• test 2 (i don't save the find result) scores at 1,553 operations by second

So, yes, find is "slow" and it's definitively a good idea to store it in a variable.

Answer 2

If you are going to be re-using variables multiple times, it is definitely a great idea to cache them like you are doing.

.find() traversing within the jQuery object you pass before it, so it only looks within what is already given, making it very fast.

var $mainElement = $('#whatever'),
    $innerLIs  = $mainElement.find('li'),
    $innerTDs  = $mainElement.find('td');

// Now that these are cached in memory, doing anything to them is very quick

$innerLIs.hide();
// etc etc

If we kept querying for them, it would have to look through the DOM each time. And once that was finished, it would be wrapping it in a jQuery object each time as well.