what is repaint
When changing the color or background of an element, it will not affect the page layout, but if the color or background changes, the page will be re-rendered, which is redrawing.
The following actions cause reflows:
Color, background related properties: background-color, background-image etc.
outline related properties: outline-color, outline-width, text-decoration
border-radius, visibility, box-shadow
What is reflow (reflow)
When adding or deleting dom nodes, or modifying the width and height of elements, the page layout will be changed, then the dom tree will be reconstructed and rendered again, which is reflow.
The following actions cause reflows:
- The first render of the page
- The browser window size changes
- The content of the element changes
- The size or position of the element changes
- The font size of the element changes
- Activate CSS pseudo-classes
- Query certain properties or call certain methods
- Add or remove visible DOM elements
Summarize
- Redrawing will not cause changes in dom structure and page layout, but only style changes, redrawing does not necessarily result in reflow.
- Reflow will cause changes in the dom structure and page layout. If there is reflow, there must be redrawing.
How to reduce and optimize redrawing and reflow
- Try to use CSS3
transforminstead oftop，leftother operations when moving and transforming element positions
2. Don’t use tablelayouts
3. The operation of changing the style attribute multiple times合并成一次操作
4. Use 文档素碎片（documentFragment）, vue uses this method to improve performance
5. In the process of animation realization, enableGPU硬件加速：transform:tranlateZ(0)
6. For animation elements 新建图层, improve the performance of animation elementsz-index
7. When writing animations, try to userequestAnimationFrame