关键路径渲染
关键渲染路径 :
浏览器将HTML，CSS，JavaScript转换为屏幕上所呈现的实际像素，这期间所经历的一系列步骤，叫做关键路径（Critical Rendering Path）
路径概览
|------- DOM ------|
HTML解析---| |---渲染树---布局---绘制
|------ CSSOM -----|
HTML 是逐步解析的，不会等待 DOM 都构建完毕后再去构建 CSSOM 。正常来说，从上面也可以看出，DOM的构建跟 CSSOM 是平行的，他们是井水不犯河水，各自默默构建的。等待 DOM树 和 CSSOM树 都构建完毕后，他们就会结合组成 渲染树 。然后计算节点位置和大小（自动重排）。接下来就是将 渲染树 转换成屏幕上的像素。
关键渲染路径 :
有了渲染树之后，接下来进入布局阶段。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。
注意
- 渲染树仅会捕获可见的内容，即以下内容不会在渲染树中：
- 不会渲染输出的节点（如脚本Token（如
link，script），元Token（<head></head>以及标签内的元素）） - 被隐藏的节点(
display: none)，但visibility:hidden的节点会在渲染树中，因为该节点还大小和位置都有计算，只是没绘制出来。
关键渲染路径 :
浏览器构建渲染树的工作如下：
- 从DOM树的根节点开始遍历每个可见节点
- 对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们
-
DOM是一边解析，一边输出为节点对象的，待所有的Token都转化为节点对象，DOM树就构建完成了 ；
-
CSSOM必须完整构建，也就是不完整的CSS是无法使用的，构建一旦开始，就必须等到构建完毕 。一般来说，这不会有什么问题，但如果
HTML解析器遇到了JavaScript，那么它会暂停构建DOM，将控制权交给JavaScript引擎。这就是平时说的，JavaScript加载，解析和执行会阻碍DOM的构建。由于
JavaScript也有可能操作CSSOM，且我们知道CSSOM必须要完整才能使用，所以浏览器让JavaScript执行延迟到CSSOM构建完毕后，才去执行。然后再恢复DOM树的构建。所以，当出现这种情况的时候，CSSOM也会阻碍DOM构建的。
关键渲染路径 :
通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个
script标签时，DOM构建将暂停，直至脚本完成执行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS。
总结
DOM一边解析，一边生成节点对象；CSSOM一旦开始构建，就必须要构建完成，因为不完整的CSSOM可能得不到最终的样式。- 正常情况下，
DOM树和CSSOM树并行构建，待两者都构建完毕后，组成渲染树，然后进行布局计算，最后绘制，呈现到屏幕上； - 特殊情况，也就是 HTML解析时遇到了
Script，为了避免JavaScript可能会操作DOM，从而跟DOM树构建起冲突， 将会暂停DOM树的构建，且将主动权交给JavaScript 引擎。这就是JavaScript加载，解析和执行会阻碍DOM树构建的原因； - 也是特殊情况下，
JavaScript可能会操作CSS，从第一点知道，CSSOM一旦构建，将不会停下来，所以，此时，浏览器将会暂停JavaScript的执行，先去加载，解析，构建CSSOM，然后再执行JavaScript，然后再恢复DOM树的构建。这种情况下，CSSOM也是会阻碍DOM树的构建的； - 渲染树节点跟DOM树节点，不是一一对应的 ，DOM树上存在
head标签和脚本标签和不可见的元素，渲染树上都是没有的。因为渲染树只会渲染需要渲染且可见的节点。
