关键路径渲染
浏览器接收到服务器返回的HTML、CSS和JavaScript字节数据并对其进行解析和转变成像素的渲染过程被称为关键渲染路径
浏览器在渲染页面前需要先构建出DOM树与CSSOM树（如果没有DOM树和CSSOM树就无法确定页面的结构与样式，所以这两项是必须先构建出来的）。
DOM树全称为Document Object Model文档对象模型，它是HTML和XML文档的编程接口，提供了对文档的结构化表示，并定义了一种可以使程序对该结构进行访问的方式（比如JavaScript就是通过DOM来操作结构、样式和内容）。DOM将文档解析为一个由节点和对象组成的集合，可以说一个WEB页面其实就是一个DOM。
CSSOM树全称为Cascading Style Sheets Object Model层叠样式表对象模型，它与DOM树的含义相差不大，只不过它是CSS的对象集合。
构建DOM树和CSSOM树
浏览器从网络或硬盘中获得HTML字节数据后会经过一个流程将字节解析为DOM树：
- 编码： 先将HTML的原始字节数据转换为文件指定编码的字符。
- 令牌化： 然后浏览器会根据HTML规范来将字符串转换成各种令牌（如
<html>、<body>这样的标签以及标签中的字符串和属性等都会被转化为令牌，每个令牌具有特殊含义和一组规则）。令牌记录了标签的开始与结束，通过这个特性可以轻松判断一个标签是否为子标签（假设有<html>与<body>两个标签，当<html>标签的令牌还未遇到它的结束令牌</html>就遇见了<body>标签令牌，那么<body>就是<html>的子标签）。 - 生成对象： 接下来每个令牌都会被转换成定义其属性和规则的对象（这个对象就是节点对象）。
- 构建完毕： DOM树构建完成，整个对象集合就像是一棵树形结构。
整个DOM树的构建过程其实就是： 字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型
构建渲染树
在构建了DOM树和CSSOM树之后，浏览器只是拥有了两个互相独立的对象集合，DOM树描述了文档的结构与内容，CSSOM树则描述了对文档应用的样式规则，想要渲染出页面，就需要将DOM树与CSSOM树结合在一起，这就是渲染树。
- 浏览器会先从
DOM树的根节点开始遍历每个可见节点 - 对每个可见节点，找到其适配的
CSS样式规则并应用。 - 渲染树构建完成，每个节点都是可见节点并且都含有其内容和对应规则的样式
渲染树构建完毕后，浏览器得到了每个可见节点的内容与其样式，下一步工作则需要计算每个节点在窗口内的确切位置与大小，也就是布局阶段。
布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小，所有相对的测量值也都会被转换为屏幕内的绝对像素值。
总结：
总结一下浏览器关键渲染路径的整个过程：
- 处理
HTML标记数据并生成DOM树。 - 处理
CSS标记数据并生成CSSOM树。 - 将
DOM树与CSSOM树合并在一起生成渲染树 - 遍历渲染树开始布局，计算每个节点的位置信息。
- 将每个节点绘制到屏幕。
