Relationship between redrawing and reflow

Need to know ： Browsers use a streaming layout model (Flow Based Layout).
The browser will HTML It can be interpreted as DOM, hold CSS It can be interpreted as CSSOM,DOM and CSSOM The merger produces Render Tree.
With RenderTree, We know the style of all nodes , Then calculate their size and location on the page , Finally, draw the node on the page .
Because browsers use streaming layout , Yes Render Tree We usually only need to traverse it once , but table And its internal elements , They may need to calculate many times , It usually takes 3 Times the time of the same element , That's why we should avoid using table One of the reasons for the layout .
In a word ： Reflow must cause redrawing , Redrawing does not necessarily cause reflow
When Render Tree The size of some or all of the elements in 、 structure 、 Or when some properties change , The process of the browser re rendering part or all of the document is called reflow .
Operation leading to backflow ：
Page first render
Browser window size changes
A change in the size or position of an element
Element content changes （ The number of words or the size of pictures and so on ）
Element font size changes
Add or remove visible DOM Elements
Activate CSS pseudo-classes （ for example ：:hover）
Query some properties or call some methods

Some common properties and methods that lead to backflow ：

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()

Repaint (Repaint)

When an element style change in a page does not affect its position in the document flow （ for example ：color、background-color、visibility etc. ）, The browser assigns the new style to the element and redraws it , This process is called redrawing .

Performance impact

The price of reflow is higher .
Sometimes even if only a single element is refluxed , Its parent element and any elements that follow it also have a backflow .
Modern browsers optimize frequent reflow or redraw operations ：
The browser maintains a queue , Put all operations that cause backflow and redraw in the queue , If the number of tasks in the queue or the time interval reaches a threshold of , The browser will clear the queue , One batch , In this way, you can turn multiple reflows and redraws into one .
When you access the following properties or methods , The browser will empty the queue immediately ：

clientWidth、clientHeight、clientTop、clientLeft

offsetWidth、offsetHeight、offsetTop、offsetLeft

scrollWidth、scrollHeight、scrollTop、scrollLeft
width、height getComputedStyle()
getBoundingClientRect()

Because there may be operations in the queue that affect the return values of these properties or methods , Even if the information you want to get has nothing to do with the changes caused by the actions in the queue , The browser will also force the queue to clear , Make sure you get the most accurate value .
How to avoid
CSS
Avoid using table Layout .
As far as possible DOM The end of the tree changes class.
Avoid multiple inline styles .
Apply animation effects to position The attribute is absolute or fixed Elements on .
Avoid using CSS expression （ for example ：calc()）.
JavaScript
Avoid frequent operation styles , It's better to rewrite it once style attribute , Or define the style list as class And change it all at once class attribute .
Avoid frequent operation DOM, Create a documentFragment, Apply all... To it DOM operation , Finally add it to the document .
You can also set the element first display: none, Show it after the operation . Because in display The attribute is none On the elements of DOM Operation will not cause reflow and redraw .
Avoid backflow caused by frequent reads / Redrawn properties , If it does need to be used many times , Just cache it with a variable .
Use absolute positioning for elements with complex animation , Take it out of the document stream , Otherwise, it will cause frequent reflow of parent elements and subsequent elements .