什么是重排/重绘?优化方案?

26 阅读1分钟

是什么

  • 当页面元素位置信息等几何属性发生变化会导致重排,本质上是render tree重新构建,需要一定的性能开销
  • 当页面元素非几何属性的变化,会导致图层发生变化,render tree不会重新构造,开销比重排小

优化方案

  1. 减少真实dom操作,使用react/vue 虚拟dom技术
  2. 合并样式更新,将不同状态的样式合并到不同的class中,通过切换class的方式减少更改
  3. 对于频繁变换的元素,使用position减少对其他元素的影响
  4. 尽量使用transform/opcity/filter开启硬件加速
  5. 使用will-change