DEV Community

Discussion on: Last Week I Wrote Some jQuery (and no one fired me 🤓)

paulsmithkc profile image
Paul Smith

querySelector() only finds the first result.

querySelectorAll() finds all results as an array which does not support chaining. Requiring you to introduce nested loops in many cases.

$(selector) finds all results and supports chaining. Which means you can often compress 5-20 lines of vanilla JS, into one line with jQuery.

Thread Thread
link2twenty profile image
Andrew Bone

compress 5-20 lines of vanilla JS, into one line with jQuery.

Though not really because it's calling a whole bunch of other functions just the Dev doesn't see it but the end user feels it.

Thread Thread
paulsmithkc profile image
Paul Smith

Readibility and Performance are tradeoffs. And generally readability is actually more important.

That being said, most of the time the performance differences are under 16ms making them invisible to the user.

Thread Thread
ashleyjsheridan profile image
Ashley Sheridan

Yeah, I agree. While it is fewer lines of JS written by the developer, there's actually a whole lot more being pulled in by the users browser. This has several side effects:

  • Their browser is downloading more data, often considerable more for the average website and use-case (e.g. where it's only used as a DOM selector). This is very noticeable for those on slower or metered connections, which a large portion of the world is on (including many parts of the USA).
  • The browser ends up doing more work to parse that Javascript, which is a blocking call if not set up correctly. This can have a negative impact on the time to first paint depending on what's being done.
  • Because the browser is doing more work parsing and executing the library, it actually uses more battery on devices that have one. This is most noticeable on older devices. There was an interesting study done by Stanford University of which this was a part ( ) which saw a 60% increase in battery consumption on some sites using Jquery.