在此之前，我们应该先了解浏览器的执行过程
大体流程如下：
- HTML和CSS经过各自解析，生成DOM树和CSSOM树
- 合并成为渲染树
- 根据渲染树进行布局
- 最后调用GPU进行绘制，显示在屏幕上
**Layout(回流):**根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。
-
从DOM树的根节点开始遍历每个
可见节点
。
-
对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
-
根据每个可见节点以及其对应的样式，组合生成渲染树。
第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括：
-
一些不会渲染输出的节点，比如script、meta、link等。
-
一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。
注意：渲染树只包含可见的节点 display 为none时 则不会被渲染
