HTML页面渲染过程

从接收到数据开始，浏览器页面开始进行自己的渲染操作，具体如下：

1.解析HTML节点，生成DOM树，解析CSS，生成CSSDOM树
2.结合两者，生成Render tree (渲染树)
3.对渲染树进行解析，确定各个节点的位置大小等
4.确定页面中各个节点的绝对像素
5.将得到的绝对像素发送到GPU进行渲染显示。

*为构建渲染树，浏览器大体上完成了下列工作：

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

*某些节点不可见（例如脚本标记、元标记等），因为它们不会体现在渲染输出中，所以会被忽略。
*某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，例如，上例中的 span 节点—不会出现在渲染树中，—因为有一个显式规则在该节点上设置了“display: none”属性。
对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们。

*发射可见节点，连同其内容和计算的样式。

Note: 简单提一句，请注意 visibility: hidden 与 display: none 是不一样的。前者隐藏元素，但元素仍占据着布局空间（即将其渲染成一个空框），而后者 (display: none) 将元素从渲染树中完全移除，元素既不可见，也不是布局的组成部分。

*最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息。有了渲染树，我们就可以进入“布局”阶段。

到目前为止，我们计算了哪些节点应该是可见的以及它们的计算样式，但我们尚未计算它们在设备视口内的确切位置和大小—这就是“布局”阶段，也称为“自动重排”。

参考文章：渲染树构建、布局及绘制