What is the difference between Sizzle and document.querySelectorAll

Question

For what I know, Sizzle and querySelector/querySelectorAll are CSS selectors. So... What is the difference between loading Sizzle and doing:

Sizzle("my CSS query")

and

document.querySelectorAll("my CSS query")

Also, I am aware that Sizzle returns an array of an element while querySelectorAll returns a NodeList (in most browsers). I am also aware that you need to load Sizzle and that you can use document.querySelector for only one element.

So is there any other difference in performance?

EDIT: My question is only about the Sizzle selector engine (and querySelectorAll). Please do not involve jQuery.

Answer 1

Sizzle was created at a time when querySelectorAll did not exist. And its development was continued after the introduction of querySelectorAll to get around browser bugs with the early implementations of querySelectorAll.

Sizzle itself tries to directly use querySelectorAll and will only use its own DOM traversing, if either the selector is not supported or know to be buggy for the given browser version. So, for modern browsers, there shouldn't be a noticeable difference in performance, because querySelectorAll would be used in both cases.

Compared to querySelectorAll, Sizzle allows defining custom pseudo-selectors, with the downside that you then cannot benefit from the performance querySelectorAll provides nowadays.

So nowadays and if you don't need custom pseudo-selectors, there is no real need for Sizzle anymore. You will only use it if you need to target older browser versions that are known to be buggy.