Introduction
Lorem ipsum dolor sit amet
摘要：浏览器初次绘制网页的必经过程称之为关键渲染路径，以下称。包含在其他元素中间的元素被表示成子节点。这意味着必须被完整解析，我们才能进入页面渲染的下一个阶段。它是一个表示页面被最终渲染效果的树。
原文：https://bitsofco.de/understan...作者：Ire Aderinokun
浏览器从接收到服务器返回的 HTML 到渲染像素到屏幕上，中间经历了很多的步骤。浏览器初次绘制网页的必经过程称之为“关键渲染路径（Critical Rendering Path，以下称CRP）”。
CRP的知识对理解怎样提升网站性能非常有用。CRP有以下6个阶段：
构造 DOM 树
构造 CSSOM 树
运行 JavaScript
创建渲染树（Render Tree）
生成布局
绘制
DOM 树是一个表示完整解析过的 HTML 网页的对象。它从根元素 开始，每一个节点代表页面上的一个元素或者文本。包含在其他元素中间的元素被表示成子节点。每一个节点记录着对应元素的所有属性，举例来说，一个 元素对应的节点包含了元素的 href 属性。
Understanding the Critical Rendering Path Understanding the Critical Rendering Path
Introduction
Lorem ipsum dolor sit amet
以这个网页为例，它将被解析成下图的 DOM树：
A good thing about HTML is that it can be executed in parts. The full document doesn"t have to be loaded for content to start appearing on the page. However, other resources, CSS and JavaScript, can block the render of the page.
HTML 的一点好处是它可以分块执行，无需加载整个文档，内容就可以开始出现在页面上。但是不好的地方是，诸如CSS 和 JavaScript 文件这样的资源，却能够阻塞页面的渲染。
CSSOM （CSS 对象模型） 是一个表示DOM相关联样式的对象。它与DOM的表现方式类似，但记录了每个节点的关联样式，包含明确声明的样式和默认继承的样式。
在上面文档中提到的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 被称为 “渲染阻塞资源（render blocking resource）” 。渲染阻塞资源 没有经过初次完整解析，渲染树(后面会解释) 不会被构建。由于CSS 具有继承和层叠的特性，它不能像 HTML一样被分块解析。在CSS 文档后面定义的样式会覆盖或更改前面定义的样式。所以如果我们只解析前面部分的 CSS 样式，而非整个 CSS 文档，那么有可能解析出来错误的结果。这意味着 CSS 必须被完整解析，我们才能进入页面渲染的下一个阶段。
CSS 文件只有适用于当前设备的时候才会被认为是 ”渲染阻塞资源“ 。 标签可以接受一个媒体属性，通过改属性我们可以声明样式表适用的设备。例如：我们有个样式表声明了一个媒体属性 orientation:landscape , 只有我们在纵向模式访问的时候，该资源才是阻塞渲染的。
由于 Javascript 文件必须等待 CSSOM 构建完成才能够运行。因此也可以说CSS 是 “阻塞脚本”的。
JavaScript 被认为是一种 解析阻塞资源，HTML 本身的解析会被 JavaScript 阻塞。
当解析器遇到
布局决定了视窗（viewport）的大小，它提供了 CSS 样式依赖的上下文，例如视窗的百分比或者单位。
视窗的大小由在文档头部提供的 meta 标签 viewport 决定，如果没有提供，视窗默认宽度是980px。
举例，常用于响应设备宽度的视窗设置如下:
如果用户使用宽度为1000px的设备访问网页，网页的大小会基于这个单位。一半视窗的大小是500px,10vw会是100px。
最终的步骤是绘制，页面的可见内容会被转化成屏幕上的像素。
绘制过程的耗时取决于 DOM 的大小和应用的样式。某些样式比其他样式需要更多的处理过程。例如：复杂的渐变背景图比简单的填充背景需要消耗更多的处理时间。
为了查看 CRP 过程，我们可以打开 chrome 的 devTools,它在Timeline 菜单下面（对于新版Chrome ,位于Performance菜单下）。
以我们上面的 HTML 为例。
Understanding the Critical Rendering Path Understanding the Critical Rendering Path
Introduction
Lorem ipsum dolor sit amet
打开页面加载过程的Event Log选项 ,我们可以看到
发送请求(Send Request) - 发送获取 index.html 的 GET 请求
解析HTML(Parse HTML) 、发送请求(Send Request) - 开始解析 HTML 和 构建DOM，并发起获取style.css 和 main.js 的 GET 请求
解析样式表(Parse Stylesheet) - 为 style.css 创建 CSSOM
执行脚本(Evaluate script) - 执行 main.js
布局(Layout) - 基于HTML 中meta port 标签生成布局
绘制(Paint) - 在文档上绘制像素
基于这些信息，我们可以做出如何优化CRP的决策。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52784.html
摘要：浏览器初次绘制网页的必经过程称之为关键渲染路径，以下称。包含在其他元素中间的元素被表示成子节点。这意味着必须被完整解析，我们才能进入页面渲染的下一个阶段。它是一个表示页面被最终渲染效果的树。 原文：https://bitsofco.de/understan...作者：Ire Aderinokun 浏览器从接收到服务器返回的 HTML 到渲染像素到屏幕上，中间经历了很多的步骤。浏览器初...
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
阅读 1192·2023-04-26 00:47
阅读 3529·2021-11-16 11:53
阅读 753·2021-10-08 10:05
阅读 2716·2021-09-22 15:19
阅读 2952·2019-08-30 15:55
阅读 2728·2019-08-29 16:55
阅读 2885·2019-08-29 15:20
阅读 1072·2019-08-23 16:13
