Hacker News new | ask | show | jobs
by inthewoods 2001 days ago
Seems like jQuery is a big cause of slowdowns - anybody have suggestions for how to provide similar functionality without it?
5 comments

jQuery is a large library, but it isn't exactly the source of web performance issues in my experience. It's the way it's used: many sites use it to render content, especially above-the-fold content (like image galleries, such as on ecommerce sites). Since much jQuery-based code waits for the DOM to finish loading first (e.g. with `$(function() { ... })`) [0], that means all the HTML has to finish being parsed and loaded first, jQuery has to be loaded, and then FINALLY you have scripts all firing at once in a frenzy rendering even more content. It's a big issue and the solution is to avoid rendering content with jQuery when pages load.

Oh and a lot of sites load jQuery synchronously in the <head> tag, usually pointing to some external CDN. That means the browser stops parsing the HTML mid-way through the page load, resolves the CDN's domain to IP, does a TLS handshake and establishes a connection to the CDN, waits to download the script, parses, runs it, and then proceeds on to the rest of the HTML. All because the developer(s) didn't know about the script `defer` attribute[1].

0. https://api.jquery.com/ready/

1. https://javascript.info/script-async-defer#defer

> That means the browser stops parsing the HTML mid-way through the page load, resolves the CDN's domain to IP, does a TLS handshake and establishes a connection to the CDN, waits to download the script, parses, runs it, and then proceeds on to the rest of the HTML.

This is not true since about 2008. All major browsers parse the HTML without waiting for synchronous <script> to load. https://developer.mozilla.org/en-US/docs/Glossary/speculativ...

If the <script> uses document.write() and what's written contains unbalanced tags, or if the document is modified in some other ways, then they re-parse but that combination is rare. This page explains what to avoid to ensure re-parsing doesn't happen (the rules may differ with other browsers): https://developer.mozilla.org/en-US/docs/Glossary/speculativ...

You're right, I stand corrected on the parsing bit I mentioned, which to be honest is a nuance I had not heard of. But it doesn't change my point much. Using script tags without `defer` will still delay the page load. They might not block parsing, but they will still block rendering. Both matter when it comes to seeing anything on your screen at all.
There's an entire site dedicated to this:

http://youmightnotneedjquery.com/

Have a local instance of it [1] to keep the functionality.

[1] - https://addons.mozilla.org/en-US/firefox/addon/localcdn-fork...

API compatible smaller libraries https://zeptojs.com/ or no library http://youmightnotneedjquery.com/
There's https://umbrellajs.com/. It's 2.5kb gzipped.

It's not feature complete with jquery as a drop in replacement but the API is about the same and it covers the 90%.