什么是回流与重绘

2019-05-24

字数统计: 823字 | 阅读时长≈ 3分钟

要想知道什么是回流与重绘，首先我们得清楚浏览器的渲染过程。你知道是渲染过程是怎样的么？下面和我一起了解一下吧。

浏览器的渲染过程

首先，解析html生成DOM树，解析css生成CSSOM树。
将DOM树和CSSOM树相结合生成渲染树(Render Tree)。
根据生成的渲染树，进行回流得到节点的位置、大小等信息。
根据渲染树以及回流得到的几何信息，得到节点的绝对像素。
将像素发给GPU，展示在页面上。

渲染过程看起来虽然很简单，但是具体做了什么可能还不是太清楚吧，下面我们一一了解下。

生成渲染树

为了生成渲染树，浏览器主要做了以下工作：

从DOM树的根节点开始遍历每个可见的节点。
对于每一个可见的节点，找到CSSOM树中的对应规则，并应用它们。
根据每一个可见的节点以及它们所对应的样式，组合生成渲染树。

注意：渲染树只包含可见节点。

不可见的节点包括：

不会渲染输出的节点。如script、meta、link等标签。
通过css属性进行隐藏的节点，如display:none。（用visibility和opacity隐藏的节点还是会渲染到渲染树上。）

回流

前面我们已经通过构造渲染树，将可见的节点以及它所对应的样式相结合起来，但是我们还需要计算每个节点在设备视图里所在的具体位置及大小。这个计算的过程我们就称为回流。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

以上代码中，我们可以看到第一个div将显示的尺寸设为了设备视窗的50%,第二个div设为了父节点宽度的50%，在回流的阶段我们就需要根据视窗的具体宽度，将其设为具体的像素值。

重绘

我们通过构造渲染树和回流的阶段，知道了哪些节点是可见的，以及可见节点的样式和具体位置和大小信息，那么我们就可以将渲染树中的每一个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘。

何时发生回流和重绘

通过前面我们知道，回流主要是计算节点在设备上显示的具体位置及大小，那么当页面发生变化的时候就会触发回流。如：

添加或删除可见的DOM元素。
元素的位置发生变化。
元素的尺寸发生变化（包括边框、边距、大小等）。
元素的文本内容发生变化。
浏览器的窗口大小发生改变（因为回流是根据视窗的大小来计算节点的具体位置的）。
注意：回流一定会触发重绘，而重绘不一定会触发回流。

打赏

请我喝杯咖啡吧~

支付宝

微信