3

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.

Ajay2707
  • 5,690
  • 6
  • 40
  • 58
Angshu31
  • 1,172
  • 1
  • 8
  • 19
  • One is a library, the other built in browser functionality. You've outlined the differences that entails. I'm not sure what else you're looking for. – VLAZ Mar 14 '20 at 18:08
  • Does this answer your question? [jQuery vs document.querySelectorAll](https://stackoverflow.com/questions/11503534/jquery-vs-document-queryselectorall) – ROOT Mar 14 '20 at 18:14
  • @VLAZ If you [take a look at Sizzle](https://cdn.jsdelivr.net/npm/sizzle@2.3.5/dist/sizzle.js), you'll notice that there is so much code. Sizzle makes use of `querySelector` as well but there is obviously so much more. One can't help but wonder, why? – Angshu31 Mar 14 '20 at 18:14
  • @Ma'mounothman It describes about how jQuery has more functions than just `querySelector` in VanillaJS. My question here is about the Sizzle selector engine without jQuery (or any) additions. – Angshu31 Mar 14 '20 at 18:18

2 Answers2

3

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.

t.niese
  • 39,256
  • 9
  • 74
  • 101
0

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.

Mr Khan
  • 2,139
  • 1
  • 7
  • 22