Optimizing Frontend Render Performance

The core of front-end rendering performance optimization is to reduce the burden on critical paths and speed up users' viewing content. Specific methods include: 1. Reduce the amount of resources loaded on the first screen, split the code, lazy loading of images, use preload/prefetch and server rendering; 2. Control the frequency of redrawing and reordering, batch operation of DOM, use transform and opacity to implement animations, use requestAnimationFrame, and avoid forced synchronization layout; 3. Use the browser caching mechanism to set up Cache-Control or ETag, add hash to file names to avoid cache pollution and enable long-term cache third-party libraries. These measures can effectively improve loading speed and running smoothness, significantly improving the user experience.

Front-end rendering performance optimization actually has two core points: reducing the burden on critical paths and speeding up users' viewing content. The point is not how beautiful the code is written, but whether users can use your page quickly and smoothly.

Reduce the amount of resources loaded on the first screen

The first screen is the content that users see at first sight, and it is also the easiest place to slow down. Many people stuff all JS, CSS and pictures into the page as soon as they come up, and users have to wait for several seconds to see things.

Suggested practices:

• Split the code and only load the JS/CSS required for the first screen
• Lazy image loading, non-first screen content loading delay
• Use preload or prefetch to load key resources in advance, but don't abuse them
• Render content in advance using server-side rendering (SSR) or static generation (SSG)

For example, if you create an e-commerce details page, the product description and comments may not be displayed at the beginning, so don’t load the corresponding script from the beginning. Let the user see the title, price and main picture first, and then process the other parts later.

Control the frequency of redraw and rearrangement

During page rendering, frequent DOM operations will cause reflow and repaint, which has a great impact on performance. Especially in animation and scrolling monitoring, problems are prone to occur.

Common optimization methods include:

• Batch operation of DOM to avoid multiple modifications to styles in loops
• Try to use transform and opacity as much as possible, they will not trigger reordering.
• Use requestAnimationFrame instead of setTimeout
• Avoid forced synchronization of layouts (such as modifying styles immediately after reading offset)

For example, if you want to dynamically adjust the position of an element, if you change its top and left each loop, it will frequently trigger the rearrangement. It can be changed to transform: translate(x, y) , which can handle it more efficiently.

Utilize browser caching mechanism

When the user visits the second time, if you do not do caching control, you still have to re-download the resources, which is obviously a waste of time. Reasonable use of cache can greatly improve the secondary loading speed.

You can set it like this:

• Add Cache-Control or ETag to static resources
• When updating the version, use the file name to add hash to avoid cache pollution.
• Enable long-term caching for infrequently changing third-party libraries

For example, when you use Webpack to build a project, the output file name is equipped with hash, such as app.12345.js , so that the browser can cache it with confidence and will not make any errors because the content changes but the cache is not updated.

Basically that's it

Front-end rendering performance optimization seems complicated, but in fact it revolves around "faster loading" and "smooth running". The above directions are the most common and worthy optimization points in actual development. Some details may look small, but together, it has a great impact on the user experience.

The above is the detailed content of Optimizing Frontend Render Performance. For more information, please follow other related articles on the PHP Chinese website!