1. What is reflow redrawing?
1. When a part of the node tree needs to be rebuilt due to changes in the size, layout, and hiding of elements, it is called reflow (rearrangement)
2. When some elements in the node number need to update their attributes, and these attributes only affect the elements The appearance, style, without affecting the layout, becomes a repaint
2. When will it cause reflow and redraw?
1. Reflow:
initial page load
change font, element size (width, height, border, position), change element content
Add or delete elements, if the element itself is displayed: none will reflow, visibility: hidden will redraw the
positioning fixed element, scroll bar will reflow when dragging.
Adjust window size
2. Redraw:
| color | border-style | visibility | background |
|---|---|---|---|
| text-decoration | backgtound-image | background-repeat | background-position |
| outline-color | outline | outline-style | border-radius |
| outline-width | box-shadow | background-size |
3. How to reduce reflow and redraw
1. Use transform instead of top
2. Use visibility instead of display: none
3. Don't use table
4. Don't put nodes as variables in loops
Reflow will inevitably lead to redrawing, but redrawing does not necessarily lead to reflow, and the cost of redrawing is higher
So if necessary, try to use redraw instead of reflow