1. Basic concepts
1. Rearrangement (reconstruction/reflow/reflow):
When the size, layout, hiding, etc. of one or more elements in the rendering tree change, the rendering tree needs to be rebuilt, resulting in a rearrangement.
2. Repaint (repaint or redraw):
Redrawing refers to the browser behavior triggered by a change in the appearance of an element. The browser will redraw based on the new attributes of the element to give the element a new appearance. Redraw occurs when the visible appearance of an element is changed without affecting the layout. For example, only modify the font color, background color, etc. of DOM elements
2. Scenarios that trigger rescheduling
Any changes to the page layout and geometric properties will trigger a reflow:
- Initial rendering of the page (unavoidable, so each page will be reflowed at least once)
- Add or remove visible DOM elements
- Change element position, or use animation
- Changes in element size - size, margins, borders
- Changes in browser window size
- Changes in padding content, such as changes in text or changes in image size, cause changes in calculated width and height.
Reflow will always cause redrawing, but redrawing will not necessarily cause reflowing.
3. How to avoid triggering frequent reflow and redrawing :
- Avoid frequent use of style, it is best to modify the class name
- Apply animation effects to elements whose position attribute is absolute or fixed
- You can set display: none for the element first, and then display it after the operation is completed. Because DOM operations performed on elements with a display attribute of none will not cause reflow and redrawing
- Use createDocumentFragment to perform batch DOM operations
- Anti-shake/throttle processing for resize, scroll, etc.
- Avoid frequently reading properties that will cause reflow/redraw. If you really need to use them multiple times, use a variable to cache them.
- Using the transform, opacity, and filter properties of CSS3, you can achieve synthetic effects, which is GPU acceleration.