Detailed explanation of Repaint and Reflow usage in JavaScript_Basic knowledge

Have you often heard from seniors or some front-end seniors that you cannot use CSS wildcard *, CSS selector stacking cannot exceed three levels, use class selectors as much as possible in CSS, use tables less when writing HTML, and the structure should be as simple as possible - DOM tree Waiting for these advices, I have roughly known that using wildcards or too many levels of CSS selectors may reduce performance. As for why I don’t use table tags, I have always been confused, so I just followed that, but I After getting to know Repain and Reflow, it turns out that these really can't be used too much. ok, I hope this article is helpful to you!

1. What is Repaint/Reflow?

Okay, let’s take a picture first: the general workflow of browser parsing

This picture should be easy to understand and can be summarized into four steps:

1. Parse HTML to build a DOM tree: The rendering engine starts to parse the HTML document and convert the html tags in the tree or tags generated by js to DOM nodes, which is called -- content tree.
2. Build a rendering tree: parse the CSS (including external CSS files and style elements as well as styles generated by js), calculate the style of the node based on the CSS selector, and create another tree - the rendering tree.
3. Layout rendering tree: Called recursively from the root node, calculate the size, position, etc. of each element, and give each node the precise coordinates where it should appear on the screen.
4. Draw the rendering tree: Traverse the rendering tree, and each node will be drawn using the UI backend layer.

Okay, we can see that Repain and Reflow appear in the third and fourth steps respectively. Therefore we give the following definition:

Each element in the DOM structure has its own box (model), which requires the browser to calculate according to various styles (browser, developer-defined, etc.) and place the elements in it according to the calculation results This process is called reflow; when the position, size and other attributes of various boxes, such as color, font size, etc., are determined, the browser draws these elements according to their respective characteristics. , so the content of the page appears, this process is called repaint.
It can be seen that these two things are very important for the browser to render the page, and they will affect the performance. Therefore, we need to understand some common operations that will cause repaint and reflow, and they should be minimized to improve the rendering speed.

2. Some 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 is likely to lead to the reflow of child nodes, or even parent nodes and sibling nodes. It may be okay on some high-performance computers, but if reflow occurs on a mobile phone, the process is very painful and power-consuming.
Therefore, the following actions are likely to be relatively costly.

• When you add, delete, or modify DOM nodes, it will cause Reflow or Repaint.
• When you move the position of the DOM or create an animation.
• When you modify CSS styles.
• When you resize the window (the mobile version does not have this problem), or when scrolling.
• When you modify the default font of a web page.

Note: display:none will trigger reflow, while visibility:hidden will only trigger repaint because no position change is found.
3. How to optimize?

Reflow is inevitable, and the impact of Reflow on performance can only be minimized. Here are some suggestions:

Don’t modify the DOM style one by one. Instead of doing this, it is better to pre-define the css class and then modify the DOM className:

 // 不好的写法
  var left = 10,
  top = 10;
  el.style.left = left + "px";
  el.style.top = top + "px";
  // 推荐写法
  el.className += " theclassname";

Modify the DOM after taking it offline. Such as:
a> Use the documentFragment object to operate the DOM in memory.
b> First give the DOM display:none (one repaint), and then you can change it however you want. For example, modify it 100 times and then display it again.
c> Clone a DOM node into the memory, and then change it however you want. After the change is completed, exchange it with the online one.

Don’t put the attribute values ​​of DOM nodes in a loop as variables in the loop. Otherwise this will result in a large number of reads and writes of the node's attributes.

Modify lower-level DOM nodes as much as possible. Of course, changing lower-level DOM nodes may cause a large area of ​​reflow, but the impact may also be small.

If you use fixed or absoult position for animated HTML elements, modifying their CSS will greatly reduce reflow.

Never use table layout. Because a small change may cause the entire table to be rearranged.

After understanding these, are you more interested in the principles of browsers? OK, I will update the article about browser principles later, or you can search others first, because I think it is really important to understand the principles of browsers, which can help us write websites with better performance.