关键渲染路径

浏览器从接收到服务器返回的HTML到渲染像素到屏幕上，中间经历了很多的步骤。浏览器初次绘制网页的必经过程称之为“关键渲染路径（Critical Rendering Path，以下称CRP）”。

关键渲染路径

CRP有以下6个阶段：

• 构造DOM 树
• 构造 CSSOM树
• 运行JavaScript
• 创建渲染树（Render Tree）
• 生成布局
• 绘制

CRP

一、构造 DOM 树

DOM树是一个表示完整解析过的HTML网页的对象。它从根元素 开始，每一个节点代表页面上的一个元素或者文本。包含在其他元素中间的元素被表示成子节点。每一个节点记录着对应元素的所有属性，举例来说，一个 元素对应的节点包含了元素的href属性。

DOM 树

HTML 的一点好处是它可以分块执行，无需加载整个文档，内容就可以开始出现在页面上。但是不好的地方是，诸如CSS和 JavaScript文件这样的资源，却能够阻塞页面的渲染。

二、构造 CSSOM 树

CSSOM （CSS 对象模型） 是一个表示DOM相关联样式的对象。它与DOM的表现方式类似，但记录了每个节点的关联样式，包含明确声明的样式和默认继承的样式。

  
  
  


  
 
  

  




/* style.css */
body { 
    font-size: 18px; 
}
header { 
    color: plum; 
}
section { 
    color: firebrick; 
}
footer { 
    display: none; 
}

CSSOM 树

CSS文件只有适用于当前设备的时候才会被认为是 ”渲染阻塞资源“ 。 标签可以接受一个媒体属性，通过改属性我们可以声明样式表适用的设备。例如：我们有个样式表声明了一个媒体属性orientation:landscape , 只有我们在纵向模式访问的时候，该资源才是阻塞渲染的。

由于Javascript文件必须等待CSSOM构建完成才能够运行。因此也可以说CSS 是 “阻塞脚本”的。

三、运行 Javascript

JavaScript被认为是一种 解析阻塞资源，HTML本身的解析会被JavaScript阻塞。

当解析器遇到