一 CRP(关键渲染路径)

关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕像素的一系列步骤。优化关键渲染路径可提高渲染性能。关键渲染路径包括文档对象模型(DOM)、CSS 对象模型(CSSOM)、渲染树和布局。

关键渲染路径中的五个步骤：

1 请求html数据：从网页请求以 HTML 请求开始。服务器返回 HTML 的响应标头和数据。

2 解析DOM：然后浏览器开始解析 HTML，将接收到的字节转换为 DOM 树。

3 解析所有外部链接资源：浏览器每次找到指向外部资源的链接时都会发起请求，无论是样式表、脚本还是嵌入的图像引用。一些请求是阻塞的，这意味着在处理导入的资产之前，其余 HTML 的解析将停止。浏览器继续解析发出请求的 HTML 并构建 DOM，直到将外部链接的html或者javascript中的dom全部构建完成；

4 构建渲染树：完成 DOM 和 CSSOM 后，浏览器构建渲染树，计算所有可见内容的样式。

5 布局：渲染树完成后，会进行布局，定义所有渲染树元素的位置和大小。

所以Web 性能包括服务器请求和响应、资源加载、脚本编写、渲染、布局以及将像素绘制到屏幕上

二 构建DOM树

HTML 标记包括开始和结束标记，以及属性名称和值。如果文档格式正确，则解析它会简单快捷。解析器将标记化的输入解析到文档中，构建文档树。

DOM 树描述了文档的内容。该元素是文档树的第一个标签和根节点。树反映了不同标签之间的关系和层次结构。嵌套在其他标签中的标签是子节点。DOM 节点数越多，构建 DOM 树所需的时间就越长。

当解析器找到非阻塞资源（例如图像）时，浏览器将请求这些资源并继续解析。遇到 CSS 文件时可以继续解析，但<script>标签（尤其是那些没有async or defer属性的标签）会阻止呈现，并暂停 HTML 的解析。尽管浏览器的预加载扫描器加速了这个过程，但过多的脚本仍然是一个重要的瓶颈。

预加载扫描仪

在浏览器构建 DOM 树的同时，这个过程占据了主线程。发生这种情况时，预加载扫描器将解析可用内容并请求高优先级资源，如 CSS、JavaScript 和 Web 字体。多亏了预加载扫描器，我们不必等到解析器找到对外部资源的引用来请求它。它将在后台检索资源，以便在主 HTML 解析器到达请求的资源时，它们可能已经在运行中，或者已经下载。预加载扫描器提供的优化减少了阻塞

                                            
<link rel="stylesheet" src="styles.css"/>
<script src="myscript.js" async></script>
<img src="myimage.jpg" alt="image description"/>
<script src="anotherscript.js" async></script>
                                            
                                        

在这个例子中，当主线程解析 HTML 和 CSS 时，预加载扫描器会找到脚本和图像，并开始下载它们。为确保脚本不会阻塞进程，请添加async属性，defer如果 JavaScript 解析和执行顺序很重要，则添加属性

等待获取 CSS 不会阻止 HTML 解析或下载，但会阻止 JavaScript，因为 JavaScript 经常用于查询 CSS 属性对元素的影响

三 构建CSSOM

关键渲染路径的第二步是处理 CSS 并构建 CSSOM 树。CSS 对象模型类似于 DOM。DOM 和 CSSOM 都是树。它们是独立的数据结构。浏览器将 CSS 规则转换为它可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和兄弟关系的节点树

与 HTML 一样，浏览器需要将接收到的 CSS 规则转换成它可以使用的东西。因此，它重复了 HTML 到对象的过程，但针对的是 CSS。

CSSOM 树包含来自用户代理样式表的样式。浏览器从适用于节点的最通用规则开始，并通过应用更具体的规则递归地细化计算的样式。换句话说，它级联属性值。

构建 CSSOM 非常非常快，并且在当前的开发人员工具中并没有以独特的颜色显示。相反，开发人员工具中的“重新计算样式”显示解析 CSS、构建 CSSOM 树和递归计算计算样式所需的总时间。在 Web 性能优化方面，有较低的悬而未决的成果，因为创建 CSSOM 的总时间通常少于一次 DNS 查找所需的时间

四 构建渲染树

渲染树同时捕获内容和样式：DOM 和 CSSOM 树被合并到渲染树中。为了构建渲染树，浏览器从 DOM 树的根开始检查每个节点，并确定附加了哪些 CSS 规则。

渲染树仅捕获可见内容。头部（通常）不包含任何可见信息，因此不包含在渲染树中。如果有display:none设置在一个元素上，它和它的任何后代都不在渲染树中。

每个可见节点都应用了其 CSSOM 规则。渲染树包含所有具有内容和计算样式的可见节点——将所有相关样式与 DOM 树中的每个可见节点匹配，并根据CSS 级联确定每个节点的计算样式。

五 布局

关键渲染路径的第五步是在渲染树上运行布局以计算每个节点的几何形状。布局是确定渲染树中所有节点的宽度、高度和位置的过程，以及确定页面上每个对象的大小和位置的过程。重排是页面或整个文档的任何部分的任何后续大小和位置确定。

一旦构建了渲染树，布局就开始了。渲染树标识了哪些节点被显示（即使不可见）以及它们的计算样式，但不是每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器从渲染树的根开始并遍历它。

在网页上，几乎所有东西都是一个盒子。不同的设备和不同的桌面偏好意味着无限数量的不同视口大小。在这个阶段，考虑到视口大小，浏览器决定屏幕上所有不同框的尺寸。以视口的大小为基础，布局一般从body开始，布局body所有后代的尺寸，配合每个元素的box模型属性，为不知道尺寸的替换元素提供占位空间，比如作为我们的形象

第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。在我们的示例中，假设初始布局发生在图像返回之前。由于我们没有声明图像的大小，因此一旦知道图像大小，就会进行重排

六 绘画

关键渲染路径的最后一步是将各个节点绘制到屏幕上，真正意义上，肉眼可见的绘制。在绘画或光栅化阶段，浏览器将布局阶段计算的每个框转换为屏幕上的实际像素。绘画涉及将元素的每个视觉部分绘制到屏幕上，包括文本、颜色、边框、阴影以及按钮和图像等替换元素。浏览器需要超级快速地完成此操作