When we talk about page optimization, it’s all about making pages display and respond faster. Since the focus of a page is different at different stages of its life, if we want to talk about page optimization, we need to analyze the different stages of a page’s life cycle.

Usually a page has three phases: load phase, interaction phase, and close phase.

  • Loading stage refers to the process from sending a request to rendering a complete page. The main factors affecting this stage are the network and JavaScript scripts.
  • Interaction stage is mainly the integration process from page loading to user interaction, and the main factor affecting this stage is JavaScript script.
  • The closing stage is mainly some cleaning operations done by the page after the user issues the closing instruction.

Loading stage

Loading stage rendering pipeline

As you already know from previous articles, not all resources block the first rendering of a page. Images, audio, and video files do not block the first rendering of a page. JavaScript, first requested HTML resource files, and CSS files block the first rendering because HTML and JavaScript files are needed to build the DOM and CSS files are needed to build the render tree.

We call these resources that block the first rendering of a page critical resources. Based on key resources, we can continue to refine the three core factors that affect the first rendering of a page.

The first is the number of key resources. The more critical resources there are, the longer the first page load time will be.

The second is critical resource size. In general, the smaller the content of all the key resources, the shorter the download time for the entire resource, and the shorter the blocking time for rendering.

The third is the number of Round Trip times (RTT) required to request a critical resource. RTT is the round-trip delay here. It is an important performance indicator of the network. It indicates the total delay from the time when the sender sends data to the time when the sender receives acknowledgement from the receiver. Generally, an HTTP packet is about 14KB, so a 0.1m page needs to be divided into 8 packets for transmission, that is to say, 8 RTT is needed.

The overall optimization principle is to reduce the number of key resources, the size of key resources, and the RTT times of key resources.

Interaction stage

When we talk about optimization in the interaction phase, we are talking about how fast the rendering process can render frames, because in the interaction phase, the rendering speed of frames determines the smoothness of the interaction. So talking about page optimization is really talking about how the rendering engine renders frames, otherwise you can’t optimize the frame rate.

Interaction phase rendering pipeline

In most cases, generating a new frame is triggered by JavaScript by modifying the DOM or CSSOM. There are other frames that are triggered by CSS.

If a change in layout information is detected during the calculation style phase, the rearrangement operation is triggered, which then triggers a series of operations in the subsequent rendering pipeline, which can be very costly.

Similarly, if there is no modification of layout information in the calculation style stage, but only modification of color information, then there will be no adjustment related to layout, so you can skip the layout stage and directly enter the drawing stage, which is called redrawing. The cost of not redrawing the phase is also not small.

There is also a case where CSS is used to implement morphing, gradients, animations, etc. This is triggered by CSS and performed on the compositing thread. This process is called compositing. Because it does not trigger rearrangements or redraws, and the composition operation itself is very fast, it is the most efficient way to perform composition.

Having reviewed how frames are generated during interaction, we can now discuss optimizations. A big rule of thumb is to make the generation of individual frames faster.

1. Reduce the JavaScript script execution time

2. Avoid forcible layout synchronization

3. Avoid layout jitter

4. Make good use of CSS compositing animation

5. Avoid frequent garbage collection

Optimize the storage structure as much as possible and avoid the generation of small particle objects as much as possible.