First, browser rendering page process

The following is a picture provided by Teacher Li Bing when explaining the working principle and practice of browserAs you can see from the figure above, after the browser downloads the HTML, the general process is as follows

  1. The DOM parsing
  2. A. style tag will be parse first B. link tag will be downloaded first C. link tag will be parse first Both cases block DOM parsing
  3. Script download and execute a. When encountering embedded script code, the code will be executed. Before execution, it will wait for step 2 to complete, because JS may need to operate on style B. C. In both cases, DOM parsing is blocked

From the above, we can see that the main reason for putting script at the end of the body tag is to improve the rendering speed of the first screen and avoid js missing DOM elements

4. Generate a layout tree

Each DOM node corresponds to a node in the layout tree. According to the corresponding relationship in the figure above, not all DOM nodes correspond to a layer in the layer tree. If there is no corresponding layer, the node will belong to the layer of its parent element. So how do you generate a layer? A layer can be generated in two cases:

• An element that has a cascading context

Position: Fixed,absolute, and other attributes that are out of the document flow

Opacity transparency

The filter filtration etc.

. Welcome to supplement

• Places that need to be clipped will also be created as layers, such as scroll bars

5. Generate layer tree

After the layer tree is generated, the paint step in Figure 1 begins to draw. Instead of drawing, paint generates a drawing list, which is then handed to the compositing thread, which generates a bitmap by the GPU, and is rendered to the page by the browser process. That is, after paint, the main thread is free, if there are no more tasks. This has to do with GPU acceleration, which I’ll get to next

Two, what is rearrangement (reflux)

Here is a complete rendering process for a browser, but not every process has to be performed, so what does reordering mean? When changing the width, height, and other attributes that affect the layout, the Layout and Layer processes are triggered. This is called rearrangement or backflow.

Rearrangements occupy the main thread, which is single-threaded and affects performance. For example, animation is rendered frame by frame. If each frame involves rearrangement and there is a complex JS code execution between each frame, the rendering time of each frame will be prolonged. When the rendering time exceeds 0.16ms, that is, less than 60HZ, it will cause visual lag.

Three, what is redraw!

Let’s rearrange the layout. Let’s repaint the layout. For example, changing background-color, color and so on does not affect the layout operation. Performance will be greatly improved without reordering.

Note: rearrangement must cause redrawing

How to reduce rearrangement and redrawing

• Use createElementFragment to manipulate the DOM and finally push the document in together • Use classes to modify styles • Avoid table layouts • DOM read-write separation • Welcome additions

5. GPU acceleration

With rearrangement and redraw in mind, what is GPU acceleration? The GPU draws a single composite layer for this element, and changes the style without affecting the other composite layers. The following style will enable GPU acceleration: <br/>Copy the code

TranslateZ (), translate3D(), will-change, etc

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> @keyframes move {from {transform: translateX(0); } to { transform: translateX(200px); } } .move { animation: move 3s linear; } </style> </head> <body> <div class="move" style="background-color: red; width: 100px; height: 100px; position: absolute; z-index: 2;" ></div> <div style="background-color: blue; width: 100px; height: 100px; position: absolute; z-index: 1; left: 40px;" ></div> </body> </html>Copy the code

Let’s test this with Chrome and open developer Tool => Layers

First of all, the layout of the page is not 2D, it is actually A 3D cascade, assuming that the screen is X-axis horizontally and Y-axis vertically, then the direction of our eyes is z-axis. The GPU will draw a composite layer for the element with GPU acceleration enabled, as shown below

In the above animation execution process, we can see that the red block is a single composite layer, the composite layer is independent, rearrangement and redrawing will not affect each other, so as to achieve the purpose of performance optimization.

In addition, we can see that before and after the animation, the red block does not have a separate composite layer, so the page will flash. The reason is that the composite layer for the red block is redrawn before the animation starts, and it also goes through a redraw after the animation ends. So how to avoid this?

The transform(translateZ, translate3D) and will-change attributes mentioned above generate a composite layer for the DOM from the beginning so that there is no redrawing before and after the animation.