What is the difference between Sizzle and document.querySelectorAll

user_11459416 0
Viewed 566

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.

queryselector sizzle javascript
2 Answers

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.

user_19604550

Sizzle is a pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

Its a spin-off of jQuery project they say, but when it comes to differnce between jQuery and Sizzle, JQuery is a library build to simplify javascript complex syntax that people found hard to understand and get a grid of specially the begineers. So if you are using JQuery, there is going to be a lot of overhead along with it where as sizzlers offer comparatively less.

Its preferred to use querySelector over Sizzler because its just an added overhead which can very easily be done with VanillaJS so why waste it. They both do the same thing.

user_101782780
Related