概念

在 CSS 中，元素的某些属性的变化会触发浏览器的 重绘（Repaint） 或 重排（Reflow，也称为重渲染或回流）。了解这些差异可以帮助开发同学优化页面性能，避免不必要的性能开销。

重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。

重排： 当 DOM 的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

提示：重绘不一定导致重排，但重排一定会导致重绘。

什么情况下会触发重绘

触发回流时一定会触发重绘，除此以外，例如颜色修改，设置圆角、文本方向修改，阴影修改等。

重绘的主要特征是：元素尺寸、位置不变

引起重绘的属性，主要包含: 元素的颜色、背景、阴影等发生变化

color、border-style、visibility、background、outline-width、background-position、background-repeat、outline-color、background-image、outline-style、border-radius、box-shadow、background-size、outline、text-decoration、line-height、letter-spacing、word-spacing、white-space、text-transform、font-size、font-family、font-weight

什么情况下会触发回流

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

1. 添加或删除可见的 DOM 元素
2. 元素的位置发生变化
3. 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
4. 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
5. 页面一开始渲染的时候（这避免不了）
6. 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

引起回流的属性

主要是元素的尺寸和位置发生变化，主要包含：

1. 可以设置元素尺寸、位置的CSS 属性
2. 内容发生变化，如图片或者文本内容，可以引起元素的位置、尺寸变化。

width、height、margin、padding、display、border-width、border、position、overflow、font-size、vertical-align、min-height、clientWidth、clientHeight、clientTop、clientLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、getComputedStyle()、getBoundingClientRect()、scrollIntoViewIfNeeded()、伪类：如：hover

减少重排（回流）的优化方式

控制范围

• 精准到节点：操作 DOM 节点的时候，尽量控制范围，精确到某个节点，尽量不要去改动包裹他的父层。
• table、 flex 布局：元素在变化的时候，尽量不要影响整个布局。

减少次数

• 合并操作：不影响逻辑的情况下，尽量把获取和操作 DOM 节点的代码分组，集中操作，典型的就是连续设置、修改多个 Style 属性，可以使用 class 替换。
• 读写分离：对 DOM 节点的读写尽量不要混编，即读中夹写，写中夹读。这样会更容易触发回流。
• 设置 display: none：将元素的 display 属性设置为 none，修改完全部的样式修改以后，再重新设置显示。这样对主体页面回流的影响只有两次。类似的操作，还可以将元素在 DOM 上删除，然后修改完成后，重新挂载上去。
• 脱离文档流：absolute 或 fixed 可以将元素脱离文档流，重排开销小，不会对其他部分产生影响。

为什么建议读写分离，批量读、批量写

浏览器通常会批量处理样式更改，然后统一计算布局和绘制。但当读取布局属性时，浏览器必须立即计算当前布局以确保返回准确值。
因此，读写操作不分离的话，浏览器就需要在每次先写后读的操作之间强制刷新，影响代码性能。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24