Usage of Repaint and Reflow in JavaScript _ basic knowledge

This article mainly introduces the usage of Repaint and Reflow in JavaScript, which is the basic knowledge in JS beginners, if you want to use a CSS wildcard *, do you often hear from senior colleagues or some front-end predecessors? CSS selector layers cannot exceed three layers. CSS class selector should be used whenever possible, writing HTML uses less tables, and the structure should be as simple as possible-the DOM tree should be small .... with these advice, I have probably known that using wildcard characters or too many CSS selector hierarchies may reduce the performance. As for why not use table labels, I have always been confused, however, after I met Repain and Reflow, I could not use too many of them. OK. I hope this article will help you!

1. What is Repaint/Reflow?

Well, let's first draw a picture: the workflow of browser parsing.

This figure should be well understood and summarized into four steps:

1. parse HTML to build a DOM tree: The rendering engine begins to parse HTML documents and converts html tags in the tree or the tags generated by js to the DOM node. It is called the content tree.
2. Build a rendering tree: parse CSS (including external CSS files, style elements, and js-generated styles), calculate the node style based on the CSS selector, and create another tree-the rendering tree.
3. layout rendering tree: recursively calls from the root node, calculates the size and position of each element, and gives the precise coordinates of each node on the screen.
4. Draw a rendering tree: traverse the rendering tree. Each node is drawn using the UI backend layer.

Well, we can see that Repain and Reflow appear in Steps 3 and 4, respectively. Therefore, the following definition is provided:

Each element in the DOM structure has its own box (model), which requires the browser to follow various styles (defined by the browser and Developer) to calculate and place the element to the position where it appears based on the calculation result. This process is called reflow. When the location, size, and other attributes of various boxes are, for example, after the color and font size are determined, the browser then draws these elements according to their respective characteristics, so the page content appears. This process is called repaint.
It can be seen that these two things are very important for the browser to render pages and affect performance. Therefore, we need to know some common operations that may cause repainting and reflow, in addition, we should try to reduce the rendering speed as much as possible.

2. Operations that cause Repain and Reflow

The cost of Reflow is much higher than that of Repaint. Each node in the DOM Tree will have a reflow method. The reflow of a node may lead to a child node, or even a reflow of the parent and peer nodes. There may be nothing on some high-performance computers, but if reflow occurs on a mobile phone, this process is very painful and consumes power.
Therefore, the following actions may be costly.

• When you add, delete, or modify a DOM node, Reflow or Repaint may occur.
• When you move the DOM position or make an animation.
• When you modify the CSS style.
• When you Resize the window (the mobile end does not have this problem), or scroll.
• When you modify the default font of a webpage.

Note: display: none triggers reflow, while visibility: hidden only triggers repaint because no location change is found.
3. How to optimize it?

Reflow is inevitable and can only minimize the impact of Reflow on performance. The following suggestions are provided:

Do not modify the DOM style one by one. In this way, it is better to pre-define the css class and then modify the DOM className:

// Difficult syntax var left = 10, top = 10; el. style. left = left + "px"; el. style. top = top + "px"; // recommended el. className + = "theclassname ";

Modify the DOM offline. For example:
A> use the documentFragment object to operate the DOM in the memory.
B> first, give the DOM to display: none (repaint once), and then you can change it as you want. For example, you can modify it for 100 times and then display it.
C> clone a DOM node to the memory and change it as needed. After the change, switch it with the online one.

Do not put the value of the DOM node in a loop as a variable in the loop. Otherwise, a large number of attributes of this node will be read and written.

Modify DOM nodes with lower levels as much as possible. Of course, changing the DOM nodes at the bottom of the hierarchy may cause a large area of reflow, but the impact scope may be small.

When the position of fixed or absoult is used for the HTML element of the animation, modifying their CSS will greatly reduce the reflow.

Do not use table layout. A small change may cause the entire table to be re-laid.

Are you more interested in the principles of browsers? OK. An article about browser principles will be updated later, or you can search for other people first, because I think it is really important to understand the principles of the browser and it can help us write a website with better performance.