是什么
- 当页面元素位置信息等几何属性发生变化会导致重排,本质上是render tree重新构建,需要一定的性能开销
- 当页面元素非几何属性的变化,会导致图层发生变化,render tree不会重新构造,开销比重排小
优化方案
- 减少真实dom操作,使用react/vue 虚拟dom技术
- 合并样式更新,将不同状态的样式合并到不同的class中,通过切换class的方式减少更改
- 对于频繁变换的元素,使用position减少对其他元素的影响
- 尽量使用transform/opcity/filter开启硬件加速
- 使用will-change