Jquery selector performance & behavior

Question

I have a strange question about jquery selector behavior.

First approach:

$('#div').find('#something').html('hahah');
$('#div').find('#something').html('hahah');
$('#div').show();

Second approach:

var $div = $('#div');
$div.find('#something').html('hahah');
$div.find('#something').html('hahah');
$div.show();

I know that it might not have too much difference, but is the second faster than the first?? I've always used the second approach but I'm not sure if there is a difference because I don't know how the jquery selector algorithm works.

it will be because jQuery will not have to look up the node in dom, as its stored in memory — Millard, Jun 23 '15 at 20:00
essentially second one is faster. There is no need to traverse DOM again as the reference is already present. — Vikash, Jun 23 '15 at 20:02
sorry about the possible duplicate, I made a research before I asked the question, but I found nothing — Fabio, Jun 23 '15 at 20:02

score 5 · Accepted Answer · answered Jun 23 '15 at 19:59

The second way is faster/better because you have cached the selector.

Everytime you call $('selector'), the jQuery selector engine(sizzle) is called to locate your desired elements.

However, when you store them in a variable, you do not need to repeatedly call the selector engine as the results are stored.

Note, in your example above, caching can be further improved by storing the find() result as well

var $something = $('#div').find('#something');
$something.html('hahah');
$something.html('hahah');
$something.show();

Thank you man! it works as I thought, but I was not sure... PS: make your post as answer is not available. — Fabio, Jun 23 '15 at 20:08

Jquery selector performance & behavior

1 Answers1