当一个浏览器接收到从服务器发来的html页面，在渲染并呈现到屏幕上之前，有很多步骤要做。浏览器渲染页面需要做的一系列行为被称作“关键渲染路径（Critical Rendering Path 简称CRP）”。
CRP 的知识对于如何提升网站性能是相当有用的。CRP有6个步骤：
- 构建DOM树
- 构建CSSOM树
- 运行JavaScript
- 创建渲染树
- 生成布局
-
绘制页面
CRP的6个步骤
构建DOM树
DOM（Document Object Model）树是一个表示整个解析过的HTML页面的对象，从根节点开始，会创建页面中的每个 元素/文本 节点。嵌套在其他元素中的元素作为字节点，每个节点都包含了其所有的元素属性，例如： 一个节点将有 href 属性与其关联。
举个例子
Understanding the Critical Rendering Path
Understanding the Critical Rendering Path
Introduction
Lorem ipsum dolor sit amet
上面的 HTML 将会被解析成下面的DOM树
HTML的优点在于它不必等待整个页面加载完成才呈现页面，可以解析一部分，显示一部分。但是像CSS、JavaScript等其他资源会阻止页面渲染。
构建CSSOM树
CSSOM（CSS Object Model） 是一个跟DOM相关的样式对象。它跟DOM的表示方法是相似的，但是不论显式声明还是隐式继承，每个节点都存在关联样式。
In the style.css file from the document mentioned above, we have the folowing styles
在上面提到的html页面的style.css中的样式如下
body { font-size: 18px; }
header { color: plum; }
h1 { font-size: 28px; }
main { color: firebrick; }
h2 { font-size: 20px; }
footer { display: none; }
它会被构建成下面的CSSOM树
CSS 被认为是 “渲染阻塞资源”，它意味着如果不首先完全解析资源，渲染树是无法构建的。CSS由于它的层叠继承的性质，不能像HTML一样解析一部分，显示一部分。定义在文档后面的样式会覆盖或改写之前定义的样式，因为在整个样式表都被解析之前，如果我们使用了在样式表中较早定义的样式，那错误的样式将被应用。这意味着CSS必须被全部解析之后，才能开始下一步。
如果CSS文件适用于当前设备的话，仅仅只是会阻塞渲染。标签可以使用media属性，用来指定特定样式宽度的特定媒体查询。
举个例子，如果我们有一个包含媒体属性orientation:landscape的样式，我们使用纵向模式（portrait mode）查看页面，这个资源将不会阻塞渲染。
CSS 也会导致脚本阻塞。这是因为JavaScript文件必须等待CSSOM被构建后才能运行。
运行JavaScript
JavaScript被认为是解析阻塞资源，这意味着HTML的解析会被JavaScript阻塞。
当解析器解析到