Search jQuery

jQuery Forum

Using jQuery

webrocker

Best/fastest way to find/traverse?

in Using jQuery • 12 years ago

Hi,

recently I noticed a lot rather long strings in my Scripts like this:

$('#left ul.main li a').doSomething();

I read about the context Property and that it can be used to "help" jQuery along in finding certain elements and boost the performance by targeting a context element, which otherwise defaults to "document":

$mc = $('#left');
$('ul.main li a',$mc).doSomething();

Sometimes this was suggested:

$mc = $('#left')[0];
$('ul.main li a',$mc).doSomething();

both of which would translate internally in

$('#left').find('ul.main li a').doSomething();

So now am completly confused about the "best" way of finding elements. The first example would be the most intuitive; I specify (like in CSS) the element through the cascade, and I thought that jQuery would "find" the element be climbing downwards through my cascade. I read somewhere that the opposite is the case, jQuery searches the complete document for the "a" first and filters for the parent elements till it finds the one(s) I was targeting. Hm.

So what would be the best / fastest way of targeting the elements?

$('#left ul.main li a').doSomething();
$('#left').find('ul.main li a').doSomething();
$('#left ul.main').find('li a').doSomething();
$('#left ul.main li'.find('a').doSomething();
$mc = $('#left'); // or $mc = $('#left')[0]; //?
$('ul.main li a',$mc).doSomething();
$('ul.main',$mc).find('li a').doSomething();
$('ul.main li',$mc).find('a').doSomething();
$mc = $('#left ul.main li');
$('a',$mc).doSomething();

Thanks for helping me to understand the differences
Tom

Replies(3)

jay.blanc..

Re: Best/fastest way to find/traverse?

12 years ago

You should always be as specific as possible with selectors as this will limit DOM traversal. Let's say you have a large number of div's with the same class. Caching the selector like this;

var mySelector = $(".myClass");

Will improve performance because you only traverse once. Then you just use the variable in your functions.

webrocker

Re: Re: Best/fastest way to find/traverse?

12 years ago

yes, I understand that, but it is this DOM traversal thing, which I have sketched in my first selector

$('#left ul.main li a')

to me, coming from a CSS background, this would seem a very specific "quest" for jQuery:
Find all a-tags inside list-items of the unordered list with a class of "main" that is inside the one element in the document with the id "left".

would jQuery benefit if I put it that way:

$('#left').find('ul.main li a')

because jQuery "knows" that it has to search inside the #left element, not in the document…?

thx
Tom

jay.blanc..

Re: Best/fastest way to find/traverse?

12 years ago

I haven't bench-marked anything like that, but it makes sense now that you say it.

gregnettl..

Re: Best/fastest way to find/traverse?

12 years ago

Actually, you're example of jQuery having a "specific quest" and therefore finding the element faster is inaccurate. Both Sizzle (the DOM traversal library jQuery uses) and CSS, find an element in the DOM by searching what's in the selector from right-to-left, not the other way around. So ".someDiv a" is actually no faster than "a", because all <a>'s are found first, then filtered out based on the rest of the selector.

Now, browsers are getting so fast that this has little to no performance affects for CSS, and jQuery sees minimal slow-downs because of this, but more than CSS does. The absolute fastest way to accomplish your exact selector w/ jQuery would be:

$('left').find('.main').find('li').find('a')

Believe it or not. This is because when you have more than 1 element in a jQuery selector $('.foo .bar'), it has to use Sizzle, which can be slow, otherwise it can use native DOM methods (such as getElementsByClassName or getElementsByTagName) to find what you're looking for.

Top Reply

Response title

Attachments

jQuery Forum

Best/fastest way to find/traverse?

Replies(3)

Re: Best/fastest way to find/traverse?

Re: Re: Best/fastest way to find/traverse?

Re: Best/fastest way to find/traverse?

Re: Best/fastest way to find/traverse?

Statistics

Tags

Actions