How can I learn how jQuery selectors work behind the scenes?

Question

For example, when we use $('div span'), how does jQuery do such a search for us?

Does it search for the span element first or the div?

It seems that the jQuery official site has no explanation on these things; it just show us what's functions are available through the API.

I want to know how every type jQuery selector is implemented, so I can select the best selector to use.

Do you know where I can get such info?

Answer 1

Broadly, what you need to know:

1. jQuery reads selectors from right to left.
2. Using an exact ID is fastest, followed by using an exact tag name, because they use optimized JavaScript-native methods.
3. Native CSS selectors like :first-child are faster than jQuery selectors like :first.

You can also read the official Sizzle documentation, but it doesn't really discuss optimization techniques.

Answer 2

It searches for the span elements first. It parses the selector as:

1. Any element with tagName = span
2. Having an ancestor with tagName = div

For the first part it can use the getElementsByTagName method to find all span elements, then it has to loop through the ancestors of each to look for div elements.