【浏览器】回流与重绘

页面的绘制

• 解析 html ⽣成 DOM 树
• 处理 css ⽣成 cssom 树
• 将 dom 树和 cssom 树合并⽣成 render Tree(渲染树：不包括 display:none，head 节点，但是包括 visibility:hidden 的节点)
• 根据 render Tree, 得到每个节点的⼏何信息(位置与⼤⼩：margin,padding,width,height 等)
• 将上⾯的到的⼏何信息传送到 GPU进⾏绘制。

回流（Reflow）和重绘（Repaint）是浏览器渲染过程中的两个关键概念，它们与修改DOM和CSS相关。虽然这两个过程都是渲染的一部分，但它们的开销和影响是不同的。下面对回流和重绘进行详细解释：

概述

回流（Reflow）：

回流是指在渲染页面时，由于DOM结构或尺寸的改变，需要重新计算元素的几何属性和页面布局。这个过程涉及了更多的计算工作，因此比重绘开销更大。当发生回流时，浏览器需要重新计算每个受影响元素的位置和尺寸，然后重新绘制整个页面。

导致回流的操作包括：

• 添加、删除、修改DOM元素（例如改变文本内容）
• 改变元素的位置、尺寸、边距、边框等属性
• 浏览器窗口大小改变
• 激活CSS伪类（如:hover）
• 添加或删除样式表

回流不仅影响单个元素，它可能会影响到整个渲染树，进而触发连锁回流。因此，需要尽量避免频繁的DOM和样式改变，以减少回流的次数。

重绘（Repaint）：

重绘是指在元素的外观改变但几何属性没有改变时，浏览器会重新绘制元素。这个过程开销相对较小，因为不涉及布局的重新计算。浏览器只需要根据新的样式重新绘制元素，而无需重新定位和计算大小。

导致重绘的操作包括：

• 修改元素的颜色、背景、边框等属性，但不影响其尺寸和位置
• 激活CSS伪类（如:hover）

优化策略

为了提高页面性能，可以采取以下优化策略：

• 将样式更改集中在一个类或样式表中，以减少频繁的样式更改。
• 使用 CSS transform 动画代替 JavaScript 动画，因为前者更优化，能减少回流和重绘。
• 使用文档碎片（Document Fragments）在多个 DOM 操作之间进行缓冲，减少回流次数。
• 使用 transform 属性来进行一些动画和位移，因为它不会触发回流。
• 将需要多次重排的元素，position 属性设为 absolute 或 fixed ，元素脱离了⽂档流，它的变化不会影响到其他元素。
• 操作 DOM 时，尽量在低层级的 DOM 节点进⾏操作;尽可能让局部⼩部分发⽣变动。减少 DOM 树的深度：避免在 DOM 树中嵌套过多的层级，这会增加回流的成本。

理解回流和重绘对于前端开发非常重要，因为它们会影响网页性能。通过合理优化和设计，可以减少回流和重绘的次数，提高网页的响应速度和用户体验。