2025年重绘重排回流（重绘回流）

科技前沿 • 2025-05-15 11:14 • 阅读 32

大家好，我是讯享网，很高兴认识大家。

在 HTML 中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

回流和重绘都会带来性能消耗，因此在前端开发中，要尽可能减少回流和重绘的次数，以提高页面的渲染性能。

要了解回流与重绘的产生，首先需要了解浏览器解析渲染机制，如下所示：

浏览器的解析渲染机制可以分为以下几个步骤：

以上步骤并非严格的顺序执行，其中一些步骤可能会并行进行，以提高效率。在渲染过程中，如果发生了样式改变，浏览器会重新执行布局和绘制操作，更新渲染结果。

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

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

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

触发条件：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化

以下这些操作会导致回流

在触发回流的时候，由于浏览器染页面是基于流式布局的，所以当触发回流时，会导致周围的 DOM 元素重新排列，它的影响范围有两种:

触发条件：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置

以下这些操作会导致重绘

注意：当触发回流时，一定会触发重绘，但是重绘不一定会引发回流

浏览器针对回流和重绘，本身也具备一定的优化机制，但是仅是最基础的。

了解了回流与重绘的触发条件，我们可以尽量避免不该有的操作，减少回流与重绘，提高浏览器渲染性能

在本篇文章中，我们详细探索了浏览器的回流和重绘，以及如何减少它们对页面性能的影响。回流和重绘是由于对页面进行布局和渲染的过程中，浏览器需要重新计算元素的几何信息和重新绘制元素造成的。

我们学习到了回流和重绘的定义和区别，以及触发回流和重绘的常见操作。同时，我们提供了一些减少回流和重绘的优化措施，如使用属性进行动画、使用属性进行定位、缓存布局信息等。

通过采取这些措施，我们可以减少页面的回流次数，提高页面性能和用户体验。

总之，了解回流和重绘的原理，并且采取相应的优化措施，对于开发优化性能的网页和应用程序至关重要。希望通过本篇文章的内容，能够帮助大家更好地理解和应用这些知识，从而创建出更高效、流畅的用户界面。

我正在参与

2025年重绘重排回流（重绘 回流）