CRP(Critical Rendering Path)/关键渲染路径

一、CRP引入

1、什么是CRP?

关键渲染路径是浏览器将 HTML、CSS JavaScript 转换为在屏幕上呈现的像素内容所经历的一系列步骤。

2、为什么要了解CRP？

在浏览器输入网址向服务器发送请求后返回html等相关内容，那么浏览器是怎样将内容呈现到网页上的呢？当了解了这一过程之后才能进一步提升网站的渲染效率，进而优化，那么接下来先了解CRP的执行过程把。

二、CRP执行步骤

1、总览

①构建DOM

• 将Html解析成许多Tokens
• 将Tokens转换成nodes节点
• 将nodes节点组合汇聚成Dom树

②构建CSSOM（CSS Object Model）

• 解析css文件，并构建CSSOM树（过程类似DOM）

③构建Render

• 将生成的DOM树和CSSOM树结合生成Render树

④Layout

• 对比每个元素的位置并计算出相对于布局视口的尺寸

⑤Paint

• 根据布局将render树转换成像素最终绘制到屏幕上

其中DOM树的构建是逐步进行的，而CSSOM是完整构建的,至于JS是会阻塞DOM的构建，后面会详细介绍。

<