Browser rearrangement (reflow) redrawing and optimization scheme

Time:2021-12-2
1、 What is rearrangement and redrawing

To clarify reflow and repaint, you must first understand the arrangement and rendering. When the browser renders a page, after obtaining HTML and CSS resources, it will roughly go through the following steps.
(1) HTML generate HTML tree
(2) CSS forms CSS rules
(3) The two form a rendering tree
(4) Go to the document to find their layout position – arrangement
(5) Fill the content on the document —– draw
[arrangement] is the process of calculating the position and adjusting the layout, and [drawing] is the process of drawing it. [rearrangement] is a process that causes DOM elements to find their positions again after some operations in addition to the layout arranged at the beginning. [redraw] is a process of redrawing the content.

Browser rearrangement (reflow) redrawing and optimization scheme

2、 What causes rearrangement and redrawing

1. Let’s start with rearrangement. Rearrangement is related to the movement of position and the change of layout. There are mainly the following situations that will lead to rearrangement
(1) The browser window changes. Every time the browser window is enlarged or reduced, all elements of the page must be rearranged and redrawn
(2) Add, delete and move DOM elements, change the width, height, inner and outer margins and contents of DOM elements, and modify the style of DOM elements
(3) Query the width and height attributes of DOM elements, because every time you query, the browser recalculates all elements to ensure that the calculated values are correct

2. Let’s talk about redrawing. Redrawing mainly means that the appearance of elements changes and will not be rearranged. The following situations will lead to redrawing
The background, text color and outline of the element change

3. Relationship between rearrangement and redrawing
Redrawing does not necessarily need to be rearranged, because it may only be that the elements change the text color and do not need to be rearranged. In most cases, redrawing is required, because the elements need to be drawn on the screen after rearrangement.

The following shows the time taken for rearrangement and redrawing. The square moved 100px to the right after two seconds

Browser rearrangement (reflow) redrawing and optimization scheme

3、 Why optimize

Because rearrangement and redrawing not only operate on a single DOM element, but also on the whole [layer], which takes time. If the frequency is high, it will greatly affect the performance.

What is a layer? As shown in the figure below

Browser rearrangement (reflow) redrawing and optimization scheme

Because each rearrangement and redrawing is to operate the whole layer, we can create another layer for DOM elements that need to be operated frequently, so as to trigger rearrangement and redrawing as little as possible.

So what can I turn on layers?
For frequent operations, Chrome browser automatically turns on layers, mainly in the following cases
1. CSS 3D changing graphics — transform: translatex (0)
2. < video > tag in HTML5
3. Nodes in canvas drawing
4. The node of CSS animation — keyframes animation
5. CSS acceleration attribute — will change: Transform

In addition, you can optimize in the following ways
1. When moving elements, use transform instead of top, left and right. Because the whole operation of CSS3 is realized by the combination of layers, redrawing and rearrangement will not be caused.

#node{
  // position: relative; 
  transform: translateX(0);
  width: 100px;
  height: 100px;
  background: pink;
}
var node = document.querySelector("#node");
setTimeout(function(){
    //   node.style.left="100px";
   node.style.transform="translateX(100px)";
},2000);

Similarly, move an element by 100px after two seconds, and you can see the comparison in the figure below

Browser rearrangement (reflow) redrawing and optimization scheme

2. Combine multiple operations on the style into one
Instead of modifying the style one at a time, define the class in advance and directly modify the DOM classname, which will only cause a rearrangement and redrawing
3. Modify DOM offline
If you want to perform multiple operations on the DOM element, first set the DOM to invisible, then operate on the DOM, and then set the DOM element to visible after the operation. In this way, there will only be two rearrangements and redraws
4. Utilize document fragment
Documentfragment is not real   A part of the DOM tree. Its changes will not trigger the re rendering of the DOM tree and will not cause performance problems. Add all the new elements created to the documentfragment, and finally insert the documentfragment into the DOM element together

Const list = ['Hal's mobile Castle', 'qianyuqianxun's hidden God', 'the wind is blowing']
const ul = document.getElementsByTagName("ul")[0]
let fragment = document.createDocumentFragment()
for(let i in list){
    fragment.appendChild(list[i])
}
ul.appendChild(fragment)