回流和重绘可以说是每一个web开发者都经常听到的两个词语，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。
文章目录
1. 浏览器的渲染过程
1.1 渲染过程
从上面这个图上，我们可以看到，浏览器渲染过程如下：
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树
- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
- Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
- Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。
1.2 生成渲染树
渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。
- 为了构建渲染树，浏览器主要完成了以下工作：
从DOM树的根节点开始遍历每个可见节点。 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
根据每个可见节点以及其对应的样式，组合生成渲染树
什么是不可见节点
一些不会渲染输出的节点，比如script、meta、link等。
一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的（因为还占据文档空间）。只有display:none的节点才不会显示在渲染树上。
注意：渲染树只包含可见的节点
2. 回流和重绘
2.1 回流
前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，我们可以以下面这个实例来表示：
<!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%。而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值（如下图）
2.2 重绘
最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点
最低0.47元/天 解锁文章
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
