问题
怎样减少回流和重绘？
背景
频繁的回流（Reflow）和重绘（Repaint）会导致页面卡顿、动画掉帧、交互响应延迟。在日常前端开发中，特别是涉及动态 DOM 操作和动画时，了解如何减少回流重绘是提升页面性能的关键。
现有答案
答案 1：避免触发回流
核心原则：尽量只触发重绘，不触发回流。
- 使用
transform和opacity实现动画（不触发回流） - 避免修改几何属性（width、height、padding、margin）
- 使用 CSS class 批量修改样式，而非逐个设置
答案 2：批量修改
核心原则：减少 DOM 操作次数。
- 使用
DocumentFragment批量添加节点 - 使用
requestAnimationFrame合并多次修改 - 虚拟 DOM（如 React、Vue）自动批处理更新
答案 3：读写分离
核心原则：避免强制同步回流。
- 先读取布局属性（如
offsetHeight） - 再写入修改
- 不要在读取后立即写入
我的理解
减少回流和重绘的本质是 减少浏览器重新计算布局和绘制像素的次数。核心策略：
- 属性选择：优先使用不触发回流的 CSS 属性（transform、opacity）
- 操作合并：批量修改，利用浏览器优化
- 读写分离：避免强制同步回流
探索路径
- 研究不同 CSS 属性的回流触发程度
- 学习 Chrome DevTools 性能分析工具
- 实践虚拟列表和 DocumentFragment 的使用
待验证
- 具体哪些 CSS 属性会触发回流？
-
will-change属性的最佳实践 - GPU 加速的适用场景
关联
- 相关概念：前端性能优化、渲染层合成、CSS 硬件加速
- 参考资料：Google Web Dev - 渲染性能