Web性能优化之重排重绘

web性能优化能做的事情很多，比如压缩JS体积大小， 比如降低HTTP请求次数，比如CDN优化关键资源请求速度等等。其中一个优化点事降低重排重绘次数，这里总结下。

渲染流水线

上图摘自李兵老师的《浏览器工作原理与实践》

实践方法

1. 使用 class 操作样式，而不是频繁操作 style
   • 重排重绘次数降低
2. 避免使用 table 布局
   • 重排重绘范围减小
3. 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
   • 重排重绘次数降低
4. Debounce window resize 事件
   • 重排重绘次数降低
5. 对 dom 属性的读写要分离
   • 读写会强制刷新渲染队列
6. will-change: transform 做优化
   • 空间换时间

宏观上讲，减少重排重绘因为跳过了一些渲染流水线的步骤，使的总工作量减少，所以性能得到了提升。