What is the Relative Performance of Pseudo-Class and Custom Selectors?

Question

It's my understanding that, in terms of selector speed, that #ID selectors are fastest, followed by element selectors, and then .class selectors.

I have always assumed that pseudo-class selectors and custom selectors (those in the form ':selector') are similar to .class selectors, but I realised that I'm just not sure.

I realise that this does depend on the complexity of the code within the pseudo-class/custom selector, so I guess I'd like to know the answer with this excluded as factor.

Any help would be appreciated.

Thanks.

Answer 1

It all comes down to what methods in the DOM the Sizzle engine (which is what jQuery uses to evaluate the selectors) can use to find the elements.

It can use the getElementById and getElementsByTagName methods to quickly get elements for a specific id and for a specific tag name. After that it simply has to loop through all found elements and compare each one to the conditions created from the selector.

The methods in the DOM can be used on any element, and used in combination, so for example finding all div elements inside an element with a specific id is very fast.