|
I want to draw your attention here to “Minimize main-thread work.” This single entry is often a goldmine of insights. By default, most of a webpage’s rendering and script execution (JavaScript) tasks are pushed through a client’s web browser’s main processing thread (one single processing thread). You can understand how this causes significant page loading bottlenecks. Even if all of your JavaScript is perfectly minified and shipped to the user’s browser quickly, it must wait in a single thread processing queue by default, meaning that only one script can be executed at once. So, quickly shipping loads of a firehose at a brick wall with a one-centimeter gap.
Good job delivering, but it’s not all going DB to Data go through! More and more, Google is pushing client-side speed responsiveness as our responsibility. Like it or lump it, that’s how it is (so you’d better get familiar). You might say in frustration, “Why is it like this!? Web browsers have had access to multiple processing threads for years, even mobile browsers have caught up. There’s no need for things to be this awkward, is there?” Actually, yes. Some scripts rely on the output of other scripts before they themselves can execute. In all likelihood, if all browsers were suddenly to start processing all JavaScript in parallel, out of sequence, most of the web would probably crash and burn.

So, there’s a good reason that sequential script execution is the default behavior for modern web browsers. I keep emphasizing the word “default.” Why is that? It’s because there are other options. One is to prevent the client’s browser from processing any scripts by processing them on the user’s behalf. This is known as server-side rendering (SSR). It’s a powerful tool to detangle client-side JavaScript execution knots but also very expensive. Your server must process all script requests (from all users) faster than your average user’s browser processes a single script. Let that one sink in for a moment. Not a fan of that option? OK, let’s explore JavaScript parallelization.
|
|