8. 如何减少回流重绘
总结
| 技巧 | 效果 |
|---|---|
| 使用 CSS 简写属性 | 减少样式重排 |
| 批量修改 DOM | 避免多次回流 |
| 不使用 table 布局 | 提升整体渲染效率 |
| 使用 DocumentFragment | 减少插入次数 |
| 避免循环中读取布局信息 | 防止强制同步回流 |
| 使用 transform/opacity 动画 | 避免回流，利用 GPU 加速 |
| 使用 requestAnimationFrame | 合理调度渲染任务 |
在网页渲染过程中，回流和重绘是影响性能的关键因素。频繁的布局计算和绘制会导致页面卡顿、动画不流畅等问题。
一、什么是回流和重绘？
- 回流（Reflow）：当元素的尺寸、结构或位置发生变化时，浏览器需要重新计算其几何属性，并重新构建渲染树。
- 重绘（Repaint）：当元素样式发生变化但不影响布局时（如颜色、背景色），浏览器只需重新绘制该元素。
📌 回流会引发重绘，但重绘不一定触发回流。
二、常见触发操作
| 操作 | 触发类型 |
|---|---|
修改 width/[height](file://d:\Code\Gitee\video-project\admin\src\pages\rich\index.vue#L7-L7) | Reflow |
修改 margin/padding | Reflow |
获取元素的 offsetWidth、clientHeight 等属性 | Reflow |
修改 color、background-color | Repaint |
使用 transform、opacity | Composite（合成阶段） |