怎样理解重流和重绘

Posted 2021-03-25 aisowe

下面是一些相关概念: 

1. 重流: reflow, 重绘: repaint

2. 重流必定导致重绘, 重绘不一定重流

3. 布局改变会发生重流, 元素颜色等改变只会发生重绘

 

下面是通过减少重流/重绘次数而优化页面性能的一些手段: 

1. 减少js中的dom操作, 若必须, 则尽量将读取dom和写入dom的操作放在一起, 便于浏览器累积dom变动, 一次执行, 减少重绘.

2. 缓存dom信息, 多次使用, 不要重复读取dom节点.

3. 不要一项一项地改变样式, 尽量用 css class一次性改变样式.

4. 使用documentFragment操作DOM

5. 动画使用absolute或fixed定位. 不然重流会很严重.

6. 只有在必要时才显示或隐藏元素, 这个操作必定会导致重流

7. 使用window.requestAnimationFrame()可以把代码推迟到下一次重流时执行.

8. 使用Virtual DOM(如 React / Vue)