页面重绘回流怎么减少？CSS硬件加速与DOM操作优化
重绘（Repaint）和回流（Reflow）是浏览器渲染页面时的性能瓶颈，频繁触发会导致页面卡顿。回流涉及布局计算，成本比重绘更高。
解决方法表格：
解决方法表格：
| 优化方法 | 具体操作 | 原理说明 |
|---|---|---|
| 使用transform/opacity | 动画使用transform和opacity（触发GPU加速） |
避免触发回流，硬件加速渲染 |
| 避免频繁DOM操作 | 合并多次DOM操作（如documentFragment） |
减少回流次数 |
| 离线DOM处理 | 先display: none修改DOM，再显示 |
隐藏元素修改不触发回流 |
| 避免强制同步布局 | 不要先读样式（如offsetHeight）再改样式 |
读取会强制刷新渲染队列 |
| CSS优化 | 使用will-change提示浏览器优化，减少层级过深的选择器 |
提前分配GPU资源，减少样式计算 |
更新时间：2025-07-03 09:48:23