回流(Reflow) 和重绘(Repaint)

嘤嘤怪呆呆狗

已于 2025-04-18 11:07:41 修改

阅读量930

点赞数 24

分类专栏：前端开发问题记录文章标签：前端 vue.js javascript

于 2025-04-02 21:38:50 首次发布

本文链接：https://blog.csdn.net/qq_45634593/article/details/146483341

版权

前端开发问题记录专栏收录该内容

19 篇文章

订阅专栏

文章目录

0. 浏览器控制台关键渲染步骤名词解释
1. 回流(Reflow)
2. 重绘(Repaint)
- 2.1 触发重绘的操作
- 2.2 演示
3. 两者的关系
4. 实际操作
- 4.1 在点击事件里面修改宽和高，会触发几次回流

从上面这个图上，我们可以看到，浏览器渲染过程如下：

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上。这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中

在这里插入图片描述

0. 浏览器控制台关键渲染步骤名词解释

步骤	是否直接影响用户所见	说明
样式计算 (Recalculate Style)	❌ 间接影响	确定CSS规则，但不直接绘制
布局 (Layout/Reflow)	❌ 间接影响	计算元素位置，不直接可见
绘制 (Paint)	❌ 间接影响	生成绘制指令，未上屏
分层 (Layer)	❌ 间接影响	优化绘制结构，不可见
合成 (Composite)	✅ 直接影响	将各图层合并为最终画面
显示 (Display)	✅ 直接影响	将像素输出到屏幕

1. 回流(Reflow)

回流也称为布局(Layout)，是指浏览器计算网页中元素的位置和几何信息的过程。当页面布局或元素的几何属性发生变化时，浏览器需要重新计算元素的位置和大小，这个过程称为回流。

1.1 触发回流的操作

添加或删除可见的DOM元素
页面初始渲染(无可避免，这个是开销最大的一次)
浏览器窗口大小改变（resize事件）
内容变化（如文本改变或图片大小改变）
激活CSS伪类（如:hover）
计算offsetWidth、offsetHeight等布局属性（需要返回最新的布局信息，因此浏览器不得不触发回流重绘来返回正确的值）
元素尺寸或位置发生改变（边距、宽高、边框等）

1.2 引起回流的属性

在这里插入图片描述

1.3 演示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <button>改变</button>
  <script>
    let btnEl = document.querySelector('button');
    function fn() {
      let appEl = document.querySelector('#app');
      appEl.style.width = '300px';
    }
    // 为了方便看，第二个参数，用一个变量传递
    btnEl.addEventListener('click', fn)
  </script>
</body>

</html>

在这里插入图片描述

可以看到，修改这个宽度，会触发回流，触发 layout 布局操作，这里的layout 就是指回流

2. 重绘(Repaint)

重绘是指当元素的外观样式（如颜色、背景、边框等）发生变化，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局。

2.1 触发重绘的操作

改变元素的颜色、背景色、透明度等视觉样式
改变元素的边框样式
改变文本样式（如字体、字号、颜色等）
显示/隐藏元素（不改变布局的情况下）

2.2 演示

在这里插入图片描述

可以看到这个地方，就是重绘执行的效果,

3. 两者的关系

回流必定会引起重绘：因为元素位置变化后，需要重新绘制
重绘不一定引起回流：如果只是样式变化不影响布局，则只需重绘

4. 实际操作

4.1 在点击事件里面修改宽和高，会触发几次回流

在这里插入图片描述

其实会触发一次回流，这里浏览器是有优化的，为了提高效率

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <button>改变</button>
  <script>
    let btnEl = document.querySelector('button');
    function fn() {
      let appEl = document.querySelector('#app');
      appEl.style.width = '300px';
      appEl.style.height = '400px';
    }
    // 为了方便看，第二个参数，用一个变量传递
    btnEl.addEventListener('click', fn)
  </script>
</body>

</html>