浏览器渲染分为几个过程，其中每个过程都有几个特点：
- 都有其输入的内容
- 都有其处理过程
- 都有其生成的输出内容
一、构建 DOM 树
浏览器是无法识别 html 代码的。因此需要将其转换为 DOM 树，即一种浏览器可以识别、可以用 JS 脚本操作的结构。
在这一步骤里，输入的内容是 HTML 文档，输出的是 DOM 树。
在浏览器的 console 控制台输入 document 即可打印出当前页面的 DOM 树。
二、样式计算
这一阶段的目的是为了计算出 DOM 节点中每个元素的具体样式。在计算中需要遵守 CSS 的继承和层叠两个规则。
在这一阶段，输入的内容是 CSS 文本，输出的是每个 DOM 节点的样式，被保存在 computedStyle 的结构内。最终的计算结果可以在浏览器控制台-element-computed查看。
2.1 把 CSS 转换为浏览器能理解的结构
同样的，浏览器也是无法识别 CSS 代码的，浏览器接收到 CSS 文本后，会将其转换为浏览器可以识别的结构：styleSheets
在浏览器的 console 控制台输入 document.styleSheets 即可打印出当前页面的 CSS 结构。
CSS 样式有三个来源：
- 通过 link 引用的外部 CSS 文件
- <style> 标签内的 CSS 样式
- HTML 元素的 style 属性内嵌的 CSS 样式
2.2 转换样式表中的属性值
某一些 CSS 属性有不同形式的值，如：
- 长度单位有px、em、rem
- 表示颜色有关键字（blue）、rgb等
浏览器需要将这些不同形式的属性值转换为标准化的计算值，方便进一步处理
2.3 计算 DOM 树中每个节点的具体样式
接下来，需要计算 DOM 树中每个节点的样式属性。
这就涉及到了一个概念：CSS 继承。
CSS 继承指每个节点都包含父节点的样式。
关于元素样式的继承，可以在浏览器控制台-element-style里查看。每个属性来自哪个父节点，及来自哪个文件都标记的很清楚
三、布局
3.1 创建布局树
在 DOM 树中，有一些节点不需要渲染，有一些节点被设置了不可见，如：display：none
所以浏览器会将所有需要渲染的节点创建布局树。
3.2 布局计算
详见下篇：浏览器渲染过程（二）
