下面是一些相关概念:
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)