The Cost of JavaScript

JavaScript is a programming language that makes web applications interactive. It is an essential part of front-end development, but too much JavaScript can be costly. The Cost of JavaScript is a classic talk in the front-end community. Addy Osmani shared the 2023 version in his new talk, and here is our note.

Hardware and network speed

Before talking about JavaScript, there is an important concept to keep in mind: hardware and network speed have a big impact on web pages. In today's world, most people still use mid-to-low-end devices. Therefore, the same program may run very fast in your development environment, but that does not mean it will be the same speed for users with lower-end devices.

This is why we care about JavaScript cost, because the larger the JavaScript package, the slower it will load and execute, which will be especially noticeable on mid-to-low-end devices.

Code splitting

From a JavaScript perspective, every time we run npm install, we are adding another cost. One way to reduce cost is to split the code. Code splitting is a technique that can be used to reduce the size of a JavaScript bundle. By splitting the code into multiple modules, only the modules that are needed for the current page will be loaded.

This avoids the time it takes to load a large module at the beginning, and improve the performance of the web application, especially for users with low-end devices and slow network connections.

Server-side rendering

In recent years, in order to speed up the loading of web applications, the front-end community has started to return to server-side rendering (SSR). Server-side rendering is a technique that can be used to improve the performance of a web application by rendering the HTML on the server side, and then adds event handlers (also known as hydration) after it is sent to the client side.

This can reduce the amount of JavaScript that needs to be loaded on the client side, which can improve the initial load time of the web application.

Island architecture and progressive hydration

The concept of SSR has been further extended to island architecture and progressive hydration that can be used to improve the performance of a web application by only rendering the parts of the page that are needed.

This can reduce the amount of JavaScript that needs to be loaded on the client side, which can improve the initial load time of the web application.

Resumability

At the same time, the Qwik framework introduces the Resumability concept that can be used to improve the performance of a web application by only creating event handlers when they are needed.

This can reduce the amount of JavaScript that needs to be loaded on the client side, which can improve the initial load time of the web application.

Zero JavaScript

In addition, many frameworks have started to introduce the concept of "zero JavaScript". Zero JavaScript can be used to improve the performance of a web application by eliminating the need for JavaScript on the client side.

This includes React Server Components (RSC), which completely renders components on the server side and then streams them to the client side, greatly accelerating the initial load speed.

Sum it up

In conclusion, there are many innovations in the front-end in 2023 that can help us control excessive JavaScript more effectively. At the end of the talk, Addy Osmani reiterated that high-end devices and high-speed networks should not be taken for granted.

Developing with mid-to-low-end devices and average network speeds will be closer to the real usage situation. He also recommends that each front-end team set performance goals and spend time and effort to ensure that they do not exceed those goals.