redraw, reflow

1. Briefly talk about page redraw and reflow

Simple understanding:

A room just changing the soft decoration (replacing the wallpaper) is repainting, while the hard decoration (changing the house structure) is the reflow

Reflow:

Rebuild the page structure

Reflow occurs when part or all of the elements of the render tree change their width, height, layout, display or hide, or the text structure inside the element changes, causing the page to be rebuilt

Redraw:

Change element appearance

When an element's own width, height, layout, and display or hiding have not changed, but only the appearance style of the element has been changed, repainting occurs, such as changing the background color of the element background-color

in conclusion:

Redrawing is not necessarily reflowing, but reflowing must be redrawing

2. How to minimize redraw and reflow

1. When you need to perform complex operations on an element, first hide the element with display:none, and then display it after the operation is complete.
2. When you need to create multiple DOM nodes, use documentFragment to create and then add the document at one time
3. Cache Layout property values
4. Avoid using table layout (once the table element is reflowed, it will cause all elements in the table to reflow)
5. Avoid css expressions as recalculation is done on every call (including loading the page)
6. Use css property shorthand as much as possible