reflow reflux (rearrangement, rewrite), the repaint redraw

HTML flow layout model, the layout process can be left to right, top to bottom is performed. 

Reflux refers to a process for the browser to re-render some or all of the document re-calculate the position and geometry of the elements in the document. Because reflux can lead to re-construct the entire dom tree, it is a major killer performance.

DOM Tree in each node will have a reflow method, reflow a node may cause its child nodes, even the parent node and reflow sibling nodes, and he will trigger the repaint, and reflow the overhead is very expensive . On some high-performance computer perhaps nothing, but if reflow occurs at such low performance on the phone, then this process is very painful and power-hungry.

The following actions will cause reflux:

① change the window size

② font-size size change

③ add or remove stylesheet

(Input text input will lead to) content changes ④

⑤ activation CSS pseudo-class (: hover)

⑥ operating class attributes, add or reduce

⑦ js operating dom

⑧ offset related property calculations

⑨ style setting value of

 

Reflow is inevitable, only the Reflow impact on performance is minimized 
to reduce reflux page

1, the DOM Offline Review:

First DOM to display: none (once reflow), then you think how to change on how to change. Such as modifying 100 times, and then show him out.

If you need to create multiple DOM node, you may be used to create finished disposable added DocumentFragment document: for example, adding a dynamic array element (e.g., 10 Li), added in one portion, not a single append, to reduce the number of reflux.

2, centralized modify the style:

Property on as little as possible to modify style

Try to modify the style by modifying className.

Element attributes set to absolute position or fixed. Elements from the standard flow also spun off from the DOM Tree, when needed reflow only need to reflow itself and subordinate elements.

Do not use table layout. Once the trigger reflow table element table will result in all of the other elements reflow. In the case of appropriate use table, the table-layout can be set to auto or fixed, which would allow the rendering table line by line, this approach is also intended to limit the scope of reflow

Avoid the use of expression, because expression of the browser resource requirements are relatively high. It is recalculated every call again (including loading the page)

In addition, Run the display: none reflow will occur, and, visibility: hidden will only trigger repaint, because it does not change the location of discovery.

 

 

repaint：：

1. What is repaint (redraw)

When the position of the box, the size and other attributes, such as color, font size, and so determined, browsers put all these primary colors according to their characteristics drawn again, the content presented on the page, this process is called repaint

2, under what circumstances would lead to repaint

"A the repaint Occurs the when Changes are Made to AN Elements Skin Changes that visibility, But do not Affect the ITS layout." - redraw visible appearance occurred in the element is changed, but did not affect the layout of the time. For example, only modify the DOM element font color (only Repaint, there is no need to adjust the layout)

Reference: https: //www.imooc.com/article/51623
Reference: https://www.jianshu.com/p/0b45a6bb3c6b