浏览器的渲染过程

1. 解析 HTML：浏览器通过解析 HTML 文档，建立一颗 DOM 树（Document Object Model），表示文档的结构。
2. 解析 CSS：浏览器通过解析 CSS 文件，生成一颗 CSSOM 树（CSS Object Model），表示样式的结构。
3. 合并 DOM 和 CSSOM：浏览器将 DOM 和 CSSOM 合并为一颗渲染树，表示文档的最终结构和样式。
4. Layout(回流、也叫重排):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（在视口的位置，大小）
5. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素。
6. Display:将像素发送给GPU，展示在页面上。

如何生成渲染树?

1. 从DOM树的根节点开始遍历每个可见节点。

2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。

3. 根据每个可见节点以及其对应的样式，组合生成渲染树。

哪些是不可见节点？

1. 一些不会渲染输出的节点，如script、link等。
2. 一些通过css隐藏的节点
   1. script、meta 等在页面上显示不出来的节点
   2. display: none 的节点
   3. head 节点