回流（Reflow）和重绘（Repaint）
最新回答
地球另一端的梦
2026-04-03 16:46:03
回流（Reflow）和重绘（Repaint）是浏览器渲染过程中的两个重要阶段。
回流（Reflow）：
- 定义：回流是指根据生成的渲染树，计算页面中所有可见元素的几何信息（如位置、大小）的过程。
- 触发条件：
添加或删除可见的DOM元素。
元素的位置发生变化。
元素的尺寸发生变化。
内容发生变化，如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这是无法避免的）。
浏览器的窗口尺寸变化。
激活CSS伪类（如:hover）。
- 性能影响：回流是一个较为耗时的操作，因为它需要重新计算布局，并可能影响整个页面的渲染性能。
重绘（Repaint）：
- 定义：重绘是指根据渲染树以及回流得到的几何信息，将渲染树的每个节点都转换为屏幕上的实际像素的过程。
- 触发条件：
当页面中元素样式的改变不影响它在文档流中的位置时，浏览器会将新样式赋予给新元素，这个过程只重绘不回流。例如，改变元素的背景色（background）、可见性（visibility）、轮廓（outline）等样式。
- 性能影响：相较于回流，重绘的性能消耗较小，因为它只是改变了元素的外观，而不涉及布局的重新计算。但频繁的重绘仍然可能对性能产生一定影响。
回流与重绘的关系：
- 回流一定会触发重绘，因为回流会重新计算元素的几何信息，而重绘则是根据这些新的几何信息来绘制元素。
- 但重绘不一定会触发回流，只有当元素的样式改变影响到其在文档流中的位置时，才会触发回流。
减少性能消耗的建议：
- CSS方面：
避免使用table布局，因为table布局的计算复杂度较高，容易导致回流。
避免设置多层内联样式，因为内联样式会频繁改变元素的样式，从而触发重绘或回流。
- JavaScript方面：
避免频繁操作DOM，因为每次操作DOM都可能触发回流或重绘。
对于大量插入DOM的操作，建议使用documentFragment来减少回流次数。documentFragment是一个轻量级的文档片段，可以在内存中构建DOM结构，然后一次性将其插入到页面中，从而减少回流次数，提高性能。
综上所述，回流和重绘是浏览器渲染过程中的两个重要阶段，它们分别负责计算元素的几何信息和将元素绘制到屏幕上。了解这两个过程及其触发条件和性能影响，有助于我们优化网页的渲染性能，提高用户体验。
热门标签
