What is repainting Repaint and rearrangement (reflow reflow)
Redrawing : When some attributes of the element change, such as appearance, background, color, etc., the layout will not change, and only the browser needs to redraw according to the new attributes of the element. The appearance of the element is called redrawing
Reflow : When part or all of the render tree occurs due to problems such as size and margin, the process of recalculating the DOM tree is required
The specific browser parsing and rendering mechanism is as follows:
- Parse HTML, generate DOM tree, parse CSS, generate CSSOM tree
- Combine DOM tree and CSSOM tree to generate rendering (Render Tree)
- Layout (reflow): Get the absolute pixel of the node according to the geometric information obtained from the rendering tree and reflow
- Display : Send pixels to the GPU and display them on the page
which actions trigger
trigger reflow
- page first render
- browser window size change
- Element size, position, content changes
- Element font size changes
- Add or remove visible dom elements
- activate CSS pseudo-classes (eg:hover)
- Query some properties or call some methods:
- clientWidth、clientHeight、clientTop、clientLeft
- offsetWidth、offsetHeight、offsetTop、offsetLeft
- scrollWidth、scrollHeight、scrollTop、scrollLeft
- getComputedStyle()
- getBoundingClientRect()
- scrollTo()
trigger repaint
- Redrawing does not necessarily require reflow (such as color changes), reflow will inevitably lead to redrawing (such as changing the position of the web page)
-
color modification
-
Text Orientation Modification
-
shadow modification
How to reduce reflows and redraws
- If you want to set the style of the element, by changing the class name of the element (as far as possible in the innermost layer of the DOM tree)
- Avoid setting multiple inline styles
- To apply an animation to an element, use the fixed or absolute value of the position property
- Avoid using the table layout. Changes in the size and content of each element in the table will cause the entire table to be recalculated
- For those complex animations, set position: fixed/absolute to make the element out of the document flow as much as possible, thereby reducing the impact on other elements
- Using css3 hardware acceleration, you can make transform, opacity, filters, these animations will not cause reflow redrawing
- avoid javascript expressions with css