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（合成阶段）

---