<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <blockquote> 

回流（reflow）和 重绘（repaint）是浏览器渲染过程中的两个关键概念。

• 回流指的是浏览器在计算文档流布局（layout）时，重新计算元素的位置和大小的过程。当页面中的元素发生尺寸变化、添加或删除元素、文本内容变化等操作时，会触发回流。回流可能会导致其他元素的位置和大小也需要重新计算，这可能是一个比较耗费性能的操作。
• 重绘是指在回流之后，浏览器将更新后的元素样式绘制到屏幕上的过程。当元素的外观属性（如颜色、背景等）发生变化时，会触发重绘。重绘不涉及布局的计算，所以性能上相对来说较回流开销较小。

具体的浏览器解析渲染机制如下所示：

讯享网

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

  

• Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变；

当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来；

当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘。

当涉及到回流和重绘时，以下是一些常见的例子：

1. 修改元素的尺寸：例如，通过 JavaScript 动态修改元素的宽度或高度。这会触发回流，因为浏览器需要重新计算元素的布局，并随后进行重绘。

讯享网

2. 改变字体属性：如果在 CSS 中改变了元素的字体大小、字体样式等属性，将会触发回流和重绘。因为文本的尺寸变化可能会导致周围元素的位置和大小发生变化。

3. 添加或删除元素：当通过 JavaScript 动态添加或删除元素时，会触发回流和重绘。因为浏览器需要重新计算文档流的布局，并更新显示。

讯享网

4. 修改元素的位置：如果通过修改元素的定位属性（如 top、left）来改变其位置，会触发回流和重绘。因为周围元素的布局可能会受到影响。

5. 改变元素的背景色或边框样式：当通过 CSS 修改元素的背景色、边框样式等外观属性时，将触发重绘。这不会引起回流，因为这些属性的更改不会影响布局。

讯享网

需要注意的是，不同浏览器对回流和重绘的处理方式可能略有差异。此外，现代浏览器通常会对频繁的回流进行优化，尽量减少性能开销。然而，过多的回流和重绘仍然可能导致页面性能下降，因此在编写代码时应尽量避免不必要的操作。

1. 回流必然伴随着重绘：当元素的位置和大小发生改变时，不仅需要进行回流计算，还需要进行重绘操作。所以每次回流都会导致重绘。
2. 重绘不一定会引起回流：当元素的外观属性发生改变时，只需要进行重绘而无需重新计算布局，因此不一定会引起回流。比如改变了元素的颜色、背景等样式属性。

由于回流涉及到布局的计算，因此它的性能开销较大，会导致页面重新渲染，影响用户体验和页面性能。所以在开发过程中应尽量避免频繁的回流操作，可以采取以下措施：

• 批量修改样式：将多个样式的修改集中到一起，通过添加或移除 CSS 类来实现样式的批量更改，减少回流次数。
• 避免强制同步布局：典型的例子是查询某些布局属性（如 offsetTop、offsetWidth 等）时，浏览器会强制进行回流以保证获取到最新的值。如果无法避免，可以尽量减少这类操作的次数。
• 使用 transform 替代 top/left：使用 CSS3 的 transform 属性进行位移操作，能够避免回流，并有较好的性能表现。

总之，了解回流和重绘的原理能够帮助我们优化代码，减少不必要的性能开销，提升页面的渲染性能。

优点：

1. 提高页面性能：减少回流和重绘可以减少浏览器的计算和渲染工作量，从而提高页面的性能和响应速度。
2. 减少资源消耗：回流和重绘会消耗 CPU 和 GPU 资源，通过减少它们的次数，可以降低系统资源的使用，延长电池寿命等。
3. 改善用户体验：减少回流和重绘可以减少页面加载和渲染的延迟，提高用户与网页的交互体验。

缺点：

1. 可能增加代码复杂性：为了减少回流和重绘，可能需要对代码进行修改，引入额外的逻辑，从而增加代码的复杂性和维护成本。
2. 可能影响开发效率：在追求性能**实践的同时，可能需要投入更多的时间和精力来进行代码优化和测试。
3. 不适用于所有情况：有时候，为了实现特定的功能或效果，可能无法完全避免回流和重绘。在这种情况下，需要权衡性能和功能之间的平衡。

综上所述，减少回流和重绘可以有效提高页面性能和用户体验，但需要权衡代码复杂性和开发效率。在实际开发中，需要根据具体情况做出决策，选择适合的优化方法。

1. 批量修改样式：尽量避免多次修改单个元素的样式，而是通过添加或移除 CSS 类来一次性修改多个样式。这样可以限制回流和重绘的次数。

2. 使用 transform 替代定位属性：在改变元素的位置时，使用 transform 属性代替 top/left 属性。因为 transform 属性只会触发重绘，而不会触发回流。

讯享网

3. 缓存布局信息：如果需要多次读取元素的布局属性（如宽度、高度），最好先将这些属性值缓存起来，以免重复触发回流。

4. 使用分离的 DOM 批处理：如果需要多次对 DOM 进行修改，可以将这些修改操作集中在一起，然后再将它们插入到文档中。这样可以减少回流和重绘的次数。

讯享网

通过采用上述方法，可以最大程度地减少回流和重绘的次数，提高页面的性能和响应速度，提高页面性能和用户体验。