JQuery Performance: Selector vs find vs children vs $

JavaScript
1

I’m confused as to the best way to select JQuery elements in large numbers.

Let’s say I’m want to select images in paragraphs that have the class gallery-item (assume the image is a child of the paragraph). I see there are a few options.

  1. $(‘p.gallery-tem img’)
  2. $(‘p.gallery-tem > img’)
  3. $(‘p.gallery-tem’).children(‘img’)
  4. $(‘p.gallery-tem’).find(‘img’)
  5. $pgallery.find(‘img’) (element already cached in a variable by $(p.gallery-item))
  6. $.find(‘p.gallery-tem’).children(‘img’)

There are other variations; generally children and find are interchangeable given that we know img is the p’s child.

Confusingly, I read on stackoverflow that the most efficient can depend on the circumstances. I also read that children() is slower than find() due to use of native DOM functions even though children would naturally return less elements.

Can anyone offer any rules-of-thumb of the efficiency of selecting potentially large numbers of elements? I’m leaving out selecting by ID as obviously that is faster.

Finally, what does $ mean? Does that represent the entire document via JQuery?

Thanks.

2

Hi,

In jQuery the dollar is an alias for the jQuery function.
This function is heavily overloaded and means half a dozen different things depending on what arguments it is passed.
In your example you are passing it a string that contains a selector, so the function means “Create a jQuery object containing any images in paragraphs that have the class gallery-item”.

Read more here: http://stackoverflow.com/questions/8667736/what-does-the-sign-mean-in-jquery-or-javascript

How large is large?

I can’t really offer any rules of thumb (apart from to cache elements where you can, as obviously this is quicker).
If you are undecided I would test possible scenarios on jsperf.

3

Thanks for the links! jsperf looks good.

I guess large is meaningless. Do you just use your common sense and then benchmark it? Do you think unless you’re dealing with thousands of elements it’s not worth the time to benchmark it?

4

Hi,

Not necessarily. For example, it could be the case that you have a list with 1,000 items, in which case you would want to attach an event handler to the list and then examine anything that bubbled up, as opposed to attaching 1,000 event handlers to the list items.

I do use jsperf for benchmarking, but usually only for the sake of curiosity.
I don’t think I’ve ever had the occasion to have to select thousands of elements at once.

If you need a hand setting up something on jsperf, just let me know, as it would actually be interesting to know what outperforms what.

5

Will do.

I currently work on the basis of common sense first (e.g. cache selectors, apply a listener to a table instead of each individual cell) and then check it runs fine on an older smartphone. To be honest, I’ve never come across anything that runs too slow but then like you say: “I don’t think I’ve ever had the occasion to have to select thousands of elements at once.”

By the way, is there easy way to benchmark JQuery scripts within the browser? I notice Webkit allows you to profile JavaScript but it seems too low level for what I want.

Thanks.

6

Well, you could use a library, something like benchmarkjs.
Docs are here.

7

Thanks!