Web性能优化之重排重绘

发表于 更新于 阅读次数： 本文字数： 344 阅读时长 ≈ 1 分钟

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

渲染流水线

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

实践方法

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

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