Redraw and reflow

Rendering in the browser

1. analysis HTML, formation DOM Trees , When encountering non blocking resources , For example, the image will continue to be parsed , When you meet css When you file , Will also continue to parse . When you meet js Blocking rendering of files , Will stop html Parsing .
2. structure CSSOM Trees . The browser will css Rules are transformed into style maps that can be understood and used . Browser traversal CSS Each rule set in , according to CSS Selector creation has a parent 、 A node tree of child and sibling relationships .
3. The third step is to DOM and CSSOM Combine into one Render Trees , Calculate the style or render tree from DOM The root of the tree begins to build , Traverse every visible node . Like and its child nodes and anything with display:none Nodes of styles , for example script {display:none;} These labels will not show , That is, they will not appear in Render on the tree . have visibility:hidden The node will appear in Render on the tree , Because they take up space . Since we didn't give any instructions to override the user agent defaults , Therefore, in the above code example script Nodes will not be included in Render In the tree .
4. The fourth step is to run the layout on the rendering tree to calculate the geometry of each node .（ backflow / rearrangement ）. On this basis , Considering the size of the viewing area , The browser will determine the size of all the different boxes on the screen . Based on the size of the viewing area , Layout is usually from body Start , Arrange all with the model attributes of each element body The size of the descendant element , For replacement elements whose size is unknown （ Such as images ） Provide placeholder space .
5. The last step is to draw the nodes on the screen .

backflow ：

Based on the size of the viewing area , Layout is usually from body Start , Arrange all with the box model attribute of each element body The size of the descendant element , For replacement elements whose size is unknown （ Such as images ） Provide placeholder space .
All in all , Is to calculate them in the device viewport （viewport） The exact location and size of the inside （ That is, geometric attributes and positions ）, The stage of calculation is reflux .

Repaint ：

We can convert every node in the rendering tree into actual pixels on the screen , This stage is called the redraw node . That is to draw graphics on the screen , But if the background color changes , Then it will cause redrawing , But there will be no backflow .

Backflow must trigger a redraw , Redrawing doesn't necessarily trigger reflow .

Trigger reflow redrawing

1. Add or remove visible DOM Elements
2. The position of the element changes
3. The size of the element changes （ Including margins 、 padding 、 The frame size 、 Height and width, etc ）
4. Content changes , Such as text changes or an image being replaced by another image of a different size .
5. When the page starts to render （ It can't be avoided ）
6. The window size of the browser changes （ Because the backflow is based on the size of the viewport to calculate the location and size of the element ）

Browser optimization mechanism

Each rearrangement results in additional computational overhead , Therefore, most browsers will optimize the rearrangement process through queue modification and batch execution . The browser queues up the changes , Until after a period of time or the operation reaches a certain threshold , Will clear the queue . however , When you get the operation of the layout information , A queue refresh is forced , Such as when you access the following properties or use the following methods ：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scroolTop、scroolLeft、scroolWidth、scroolHeight
• clientTop、clientLeft、clientWidth.clientHeight
• getComputedStyle()
• getBoundingClientRect

So when we modify the style , It is best to avoid using the properties listed above , They all refresh the render queue . If you want to use them , It is best to cache the values .

Ways to reduce reflow and redraw ：

1. The multiple DOM Operations are combined , Use csstext perhaps class

• Use cssText

const el = ducument.getElementById('test');
el.style.cssText += 'border-left: 1px;border-right: 2px; padding: 5px;';

• modify css Of class

const el = document.getElementById('test')
el.className += 'active';

2. Make the node separate from the document flow （ That is, invisible nodes ）, operation , Back to document flow .

• Use display:none

3. The layout event must be triggered
   That is to say offset. If the same one is used many times offset, Then you can save its value before using .
4. For more complex animation, you can use absolute positioning to make it out of the document flow . For complex animation effects , Because it often causes reflow redrawing , therefore , We can use absolute positioning to separate it from the document flow , This causes frequent backflow of parent and subsequent elements .