重绘与回流：如何写出对性能友好的CSS

会员源码网

216人浏览 · 2026-03-21 14:46:00

会员源码网 · 2026-03-21 14:46:00 发布

摘要：在Web开发中，页面的渲染性能至关重要。重绘（Repaint）和回流（Reflow）是影响页面性能的两个关键因素。本文将深入探讨重绘与回流的概念、原理，分析它们对性能的影响，并详细介绍如何通过优化CSS来减少重绘和回流，从而提升页面性能。

一、引言

在浏览网页时，我们希望页面能够快速、流畅地加载和显示。然而，当页面中的元素发生尺寸、位置或布局等变化时，浏览器需要重新计算元素的几何属性并进行渲染，这个过程就涉及到重绘和回流。频繁的重绘和回流会显著降低页面的性能，导致页面卡顿、响应缓慢等问题。因此，了解重绘和回流的原理，并掌握优化CSS的方法，对于开发高性能的Web页面至关重要。

二、重绘与回流的概念及原理

2.1 重绘（Repaint）

重绘是指当元素的外观属性（如颜色、背景色、边框颜色等）发生变化时，浏览器会重新绘制受影响的元素，以显示新的外观。重绘不会影响元素的布局和位置，只是对元素的视觉表现进行更新。例如，当我们将一个按钮的背景颜色从蓝色改为红色时，浏览器就会对该按钮进行重绘。

2.2 回流（Reflow）

回流是指当元素的几何属性（如宽度、高度、边距、填充等）发生变化，或者浏览器的窗口大小发生改变时，浏览器需要重新计算元素的布局和位置，这个过程称为回流。回流会导致浏览器重新构建渲染树（Render Tree），对页面中的所有元素进行重新布局和定位。例如，当我们向页面中添加一个新的元素、改变一个元素的尺寸或调整浏览器的窗口大小时，都会触发回流。

2.3 重绘与回流的关系

回流一定会触发重绘，因为元素的布局和位置发生变化后，其外观也需要重新绘制。而重绘不一定会触发回流，只有当元素的几何属性发生变化时才会触发回流。由于回流涉及到重新计算布局和构建渲染树，因此它的性能开销比重绘要大得多。

三、重绘与回流对性能的影响

3.1 性能开销

重绘和回流都需要消耗浏览器的计算资源和时间。频繁的重绘和回流会导致浏览器的渲染线程繁忙，从而影响页面的响应速度和交互性能。特别是在移动设备上，由于硬件性能相对较弱，重绘和回流对性能的影响更加明显。

3.2 页面卡顿

当页面中发生大量的重绘和回流时，浏览器可能无法及时完成渲染任务，导致页面出现卡顿现象。用户在操作页面时，会感觉到页面响应迟缓，甚至出现闪烁或跳动的情况，严重影响用户体验。

3.3 电池消耗

在移动设备上，频繁的重绘和回流会增加设备的CPU使用率，从而加速电池的消耗。这对于需要长时间使用移动设备的用户来说，是一个不容忽视的问题。

四、减少重绘与回流的CSS优化方法

4.1 避免频繁操作样式

4.1.1 批量修改样式

将多个样式修改操作合并为一个，减少浏览器的重绘和回流次数。可以使用CSS类来批量修改元素的样式，而不是直接修改元素的style属性。例如：

html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <style>
7       .box {
8            width: 100px;
9            height: 100px;
10            background-color: blue;
11        }
12
13       .new-style {
14            width: 200px;
15            height: 200px;
16            background-color: red;
17        }
18    </style>
19</head>
20
21<body>
22    <div id="myBox" class="box"></div>
23    <script>
24        // 不推荐的方式：频繁修改style属性
25        // const box = document.getElementById('myBox');
26        // box.style.width = '200px';
27        // box.style.height = '200px';
28        // box.style.backgroundColor ='red';
29
30        // 推荐的方式：使用CSS类批量修改样式
31        const box = document.getElementById('myBox');
32        box.className = 'new-style';
33    </script>
34</body>
35
36</html>
37

4.1.2 使用CSS变量

CSS变量可以在一个地方定义，然后在多个地方使用。当需要修改样式时，只需要修改CSS变量的值，而不需要逐个修改使用该变量的元素样式，从而减少重绘和回流。例如：

html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <style>
7        :root {
8            --main-color: blue;
9            --box-size: 100px;
10        }
11
12       .box {
13            width: var(--box-size);
14            height: var(--box-size);
15            background-color: var(--main-color);
16        }
17    </style>
18</head>
19
20<body>
21    <div class="box"></div>
22    <script>
23        // 修改CSS变量的值
24        document.documentElement.style.setProperty('--main-color','red');
25        document.documentElement.style.setProperty('--box-size', '200px');
26    </script>
27</body>
28
29</html>
30

4.2 优化布局和定位

4.2.1 使用flex或grid布局

flex和grid布局是现代CSS中强大的布局方式，它们可以更高效地处理元素的布局和定位，减少回流的发生。与传统的浮动和定位布局相比，flex和grid布局可以更好地适应不同的屏幕尺寸和设备，并且具有更好的性能表现。例如：

html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <style>
7       .container {
8            display: flex;
9            justify-content: space-between;
10        }
11
12       .box {
13            width: 100px;
14            height: 100px;
15            background-color: blue;
16        }
17    </style>
18</head>
19
20<body>
21    <div class="container">
22        <div class="box"></div>
23        <div class="box"></div>
24        <div class="box"></div>
25    </div>
26</body>
27
28</html>
29

4.2.2 避免使用table布局

table布局会导致浏览器花费更多的时间来计算表格的布局和尺寸，并且容易引发回流。在需要使用表格展示数据时，可以使用CSS的display: table、display: table-row和display: table-cell等属性来模拟表格布局，而不是直接使用<table>标签。

4.3 减少DOM操作

4.3.1 缓存DOM元素

在进行DOM操作时，尽量缓存需要频繁访问的DOM元素，避免多次查询DOM。例如：

html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6</head>
7
8<body>
9    <div id="myDiv"></div>
10    <script>
11        // 不推荐的方式：多次查询DOM
12        // for (let i = 0; i < 100; i++) {
13        //     document.getElementById('myDiv').innerHTML += '<span>' + i + '</span>';
14        // }
15
16        // 推荐的方式：缓存DOM元素
17        const myDiv = document.getElementById('myDiv');
18        let html = '';
19        for (let i = 0; i < 100; i++) {
20            html += '<span>' + i + '</span>';
21        }
22        myDiv.innerHTML = html;
23    </script>
24</body>
25
26</html>
27

4.3.2 使用文档片段（DocumentFragment）

文档片段是一个轻量级的DOM容器，它不会触发浏览器的重绘和回流。在进行大量DOM操作时，可以先将元素添加到文档片段中，然后再将文档片段一次性添加到实际DOM中。例如：

html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6</head>
7
8<body>
9    <ul id="myList"></ul>
10    <script>
11        const myList = document.getElementById('myList');
12        const fragment = document.createDocumentFragment();
13
14        for (let i = 0; i < 100; i++) {
15            const li = document.createElement('li');
16            li.textContent = 'Item ' + i;
17            fragment.appendChild(li);
18        }
19
20        myList.appendChild(fragment);
21    </script>
22</body>
23
24</html>
25

4.4 合理使用动画

4.4.1 使用transform和opacity实现动画

transform和opacity属性的变化不会触发回流，只会触发重绘。因此，在实现动画效果时，尽量使用这两个属性，而不是改变元素的尺寸、位置等几何属性。例如：

html

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <style>
7       .box {
8            width: 100px;
9            height: 100px;
10            background-color: blue;
11            transition: transform 0.5s ease;
12        }
13
14       .box:hover {
15            transform: translateX(100px);
16        }
17    </style>
18</head>
19
20<body>
21    <div class="box"></div>
22</body>
23
24</html>
25

4.4.2 避免使用会触发回流的动画属性

一些CSS属性，如width、height、margin、padding等，在变化时会触发回流。在实现动画效果时，应尽量避免使用这些属性，以免影响页面性能。

五、总结

重绘和回流是影响Web页面性能的重要因素。通过了解重绘和回流的概念、原理以及对性能的影响，我们可以采取一系列的CSS优化方法来减少重绘和回流的发生，从而提升页面的性能。这些方法包括避免频繁操作样式、优化布局和定位、减少DOM操作以及合理使用动画等。在实际开发中，我们应该根据具体的需求和场景，选择合适的优化策略，以打造高性能的Web页面。

希望本文的内容能够对广大Web开发者有所帮助，让大家在开发过程中更加注重页面性能的优化，为用户提供更好的使用体验。