1. 虚拟 DOM
- 技术：在内存中维护虚拟 DOM 树，更新时先比较新旧虚拟 DOM，仅将差异应用到实际 DOM。
- 框架：React、Vue 等。
- 优点：减少直接操作真实 DOM 的频率，降低重排和重绘。
2. 批量更新
- 技术：将多个 DOM 更新合并为一次操作。
- 框架：React 使用事务机制，Vue 通过异步队列实现。
- 优点：减少多次重排和重绘。
3. CSS 优化
- 技术：使用
transform和opacity等属性，避免触发重排和重绘。 - 框架：React、Vue、Angular 等。
- 优点：利用 GPU 加速，减少性能开销。
4. 分离读写操作
- 技术：集中读取 DOM 属性，再进行写操作，避免交替读写导致的多次重排。
- 框架：React、Vue 等。
- 优点：减少不必要的重排。
5. 使用 requestAnimationFrame
- 技术：将 DOM 更新放在
requestAnimationFrame回调中，确保在下一次重绘前完成。 - 框架：React、Vue 等。
- 优点：优化动画和频繁更新的性能。
6. 惰性加载和分块渲染
- 技术：延迟加载和渲染非关键内容，减少初始渲染压力。
- 框架：React 的
React.lazy和Suspense，Vue 的异步组件。 - 优点：提升初始加载性能。
7. 使用 will-change
- 技术：通过
will-change提示浏览器元素可能的变化，提前优化。 - 框架：React、Vue、Angular 等。
- 优点：帮助浏览器优化渲染。
8. 避免强制同步布局
- 技术：避免强制同步布局（如读取
offsetHeight后立即修改样式）。 - 框架：React、Vue 等。
- 优点：减少不必要的布局计算。
总结
前端框架通过虚拟 DOM、批量更新、CSS 优化、分离读写操作、requestAnimationFrame、惰性加载、will-change 和避免强制同步布局等技术，有效减少重排和重绘，提升性能。
