认识你自己很难，但认识你自己的时间，却是每个人都能做到的 -- 彼得·德鲁克
大家好，我是柒八九。
前言
最近，公司在做技术改造升级，老旧项目优化。因为是B端项目居多，所以优化方向也是基于浏览器端的项目改造和处理。
然后，在进行实操时发现，资源的加载是很影响页面性能的。而针对资源加载而言，根据资源的重要性，又可以做一些符合业务逻辑的处理。今天，我们就来讲讲关于影响页面资源加载的属性 - fetchpriority。
Last but not least,这偏文章算是一个引子，之后我们会出一篇关于如何对一个现有网站的性能分析。同时，因为我们有文章分类，并且该文章内容大部分都是关于浏览器的。所以，我们就将其归类为浏览器相关的文章体系。
还有，之前我们写过浏览器相关的知识点，如果想了解该系列文章(浏览器相关)，可以参考我们已经发布的文章。如下是往期文章。
你能所学到的知识点
- 前置知识点
- Fetch Priority
- fetchpriority
- 案例分析
- 将 preload 和 fetchpriority 合并
- fetchpriority 的好处
好了，天不早了，干点正事哇。
前置知识点
页面阶段
通常一个页面有三个阶段
- 加载阶段
- 是指从发出请求到渲染出完整页面的过程
- 影响到这个阶段的主要因素有网络和 JavaScript 脚本
- 交互阶段
- 主要是从页面加载完成到用户交互的整个过程
- 影响到这个阶段的主要因素是 JavaScript 脚本
- 关闭阶段
- 主要是用户发出关闭指令后页面所做的一些清理操作
加载阶段-资源获取
我们可以通过PerformanceNavigationTiming来简单的看一下，浏览器在资源加载时候，所经历的大体流程。
在上图中，Resource Timing就是在为了做资源获取的所做的准备工作。(这里涉及到网络处理相关的，我们之前也有文章介绍，如果感兴趣，可以移步到指定文章，按个人情况，自行获取)
我们将上图，做一个精简处理。
然后，我们简单的把上述的各个阶段，做一个简单的介绍。
| 时间戳 | 描述 |
| startTime | 资源加载过程开始之前的时间戳 |
| redirectStart | 触发重定向时的时间戳 |
| redirectEnd | 接收到最后一个重定向响应的最后一个字节之后的时间戳 |
| workerStart | Service Worker线程开始之前的时间戳 |
fetchStart |
浏览器开始获取资源之前的时间戳 |
domainLookupStart |
浏览器开始进行资源的域名查询之前的时间戳 |
| domainLookupEnd | 浏览器完成资源的域名查询之后的时间戳 |
connectStart |
浏览器开始建立与服务器的连接以检索资源之前的时间戳 |
| secureConnectionStart | 如果资源通过安全连接加载，则是在浏览器开始握手过程以保证当前连接安全之前的时间戳 |
| connectEnd | 浏览器完成与服务器建立连接之后的时间戳 |
requestStart |
浏览器开始从服务器、缓存或本地资源请求资源之前的时间戳 |
| responseStart | 浏览器从服务器、缓存或本地资源接收到响应的第一个字节之后的时间戳 |
| responseEnd | 浏览器接收到资源的最后一个字节之后的时间戳，或者在传输连接关闭之前的时间戳（以先到者为准） |
这些时间戳描述了资源加载过程中的不同阶段，通过它们可以了解各个阶段的时间信息，从而进行性能优化和分析。
加载阶段-页面渲染
这里可以直接参考我们之前的文章像素是怎样练成的。 这里就不在赘述了。(看过的人，都说好；如果不好，记得回来打我🐶)
Chromium 加载资源的阶段
Chromium 浏览器在加载资源时采用了两个阶段。
- {紧凑模式|Tight mode}
- {空闲模式|Idle mode}
{紧凑模式|Tight mode}是初始阶段，它会限制加载低优先级的资源，直到文档的<body>被追加到文档中（基本上，在<head>中的所有阻塞脚本执行完毕后）。在紧凑模式下，只有在发现这些低优先级资源时，同时存在不超过2个正在进行的请求，才会加载它们。
除了 {紧凑模式|Tight mode}之外，Chromium 浏览器还有一个阶段称为 {空闲模式|Idle mode}。
在 {空闲模式|Idle mode} 中，浏览器会在页面空闲时加载资源。它会根据资源的优先级和是否可见来决定何时加载资源，以提高性能和用户体验。
资源类型
{关键资源| Critical Resource}是指对网页性能和加载速度影响最大的资源。它们是在网页的{关键渲染路径|Critical Rendering Path}上，对
首次渲染和用户交互有着直接影响的资源。
或者说：关键资源就是所有可能阻碍页面渲染的资源
关键渲染路径
浏览器的{关键渲染路径|Critical Rendering Path}是指浏览器在
加载和渲染网页时所经过的一系列关键步骤，以便将网页内容呈现给用户。
下面是关键渲染路径的主要步骤以及对应的说明：
| 步骤 | 说明 |
| 解析 HTML | 解析服务器返回的 HTML 文档，构建 DOM 树。 |
| 解析 CSS | 解析 CSS 样式表，构建 CSSOM 树。 |
| 合成渲染树 | 结合 DOM 树和 CSSOM 树生成渲染树，包括可见元素和样式布局信息。 |
| 布局计算 | 对渲染树进行布局计算，确定元素在屏幕上的位置和大小。 |
| 绘制 | 根据渲染树和布局计算的结果，将页面内容绘制到屏幕上。 |
| 栅格化 | 将绘制的内容拆分成小的图块，方便传输和显示。 |
| 合成 | 将栅格化后的图块组合成一帧画面，显示在屏幕上。 |
这些步骤构成了浏览器渲染页面的关键路径。关于详细的浏览器如何渲染页面的步骤，可以参考像素是怎样练成的。
渲染阻断资源
{渲染阻断资源| Render-Blocking Resources}是指在网页加载过程中会阻止浏览器进行渲染的资源。
这些资源需要在浏览器能够继续渲染页面之前先加载和处理。渲染阻断资源的加载时间较长，会延迟网页的首次渲染和用户能够与页面进行交互的时间。
以下是常见的渲染阻断资源：
CSS：外部样式表（CSS）文件是常见的渲染阻断资源。
- 浏览器在解析 HTML 时会发现外部 CSS 文件，并且需要等待 CSS 文件
下载和解析完成后才能继续渲染页面。 - 如果 CSS 文件体积较大或加载时间较长，将会显著延迟页面的渲染。
JavaScript：JavaScript脚本也可以成为渲染阻断资源。
- 当浏览器遇到
<script>标签时，会阻塞渲染，等待JavaScript文件的下载和执行完成后才能继续渲染页面。 - 如果
JavaScript文件较大或执行时间较长，会对页面的渲染速度产生较大影响。
- 字体：自定义字体文件（如
WOFF、WOFF2、TTF等）也可能成为渲染阻断资源
- 当网页使用自定义字体时，浏览器需要
下载和解析字体文件后才能正确渲染文本内容 - 如果字体文件较大，会延迟页面的渲染。
换句话说，渲染阻塞资源是一个组件，它将不允许浏览器渲染整个DOM树，直到给定的资源被完全加载和解析/执行。在渲染阻塞资源完全加载之前，你无法渲染树。
解析器阻断资源
{解析器阻断资源|Parser-Blocking Resources}是指在浏览器解析 HTML 文档时会阻塞解析器的资源。
这些资源需要在浏览器能够继续解析文档之前先加载和处理。解析器阻断资源的加载时间较长，会延迟整个文档的解析和渲染。
以下是常见的解析器阻断资源：
外部脚本：外部 JavaScript 脚本是常见的解析器阻断资源。
- 当浏览器遇到
<script>标签引用外部 JavaScript 文件时，解析器会暂停解析 HTML 文档，等待 JavaScript 文件的下载和执行完成后才能继续解析文档。
外部样式表：外部 CSS 样式表也可以成为解析器阻断资源。
- 当浏览器遇到
<link rel="stylesheet">标签引用外部 CSS 文件时，解析器会停止解析文档，等待 CSS 文件的下载和解析完成后才能继续解析。
图像资源：在某些情况下，大型图像资源也可能成为解析器阻断资源。
- 当浏览器遇到
<img>标签或 CSS 中的background-image属性引用图像时，解析器会暂停解析文档，等待图像资源的下载完成后才能继续解析。
换句话说，当需要下载和执行解析器阻断资源时，浏览器会暂停执行和构建DOM树。当解析器阻断资源被执行完后，DOM树的构建才继续进行。
渲染阻断资源 VS 解析器阻断资源
渲染阻断资源和解析器阻断资源是两种不同类型的资源，它们在浏览器加载和处理过程中起着不同的作用。
渲染阻断资源：渲染阻断资源是指在网页加载过程中会阻止浏览器进行渲染的资源。
- 这些资源需要在浏览器能够继续渲染页面之前先加载和处理。
- 常见的渲染阻断资源包括
外部样式表（CSS）和JavaScript 脚本。 - 渲染阻断资源会延迟网页的
首次渲染(First Paint)和用户能够与页面进行交互的时间(TTI)。
解析器阻断资源：解析器阻断资源是指在浏览器解析 HTML 文档时会阻塞解析器的资源。
- 这些资源需要在浏览器能够继续解析文档之前先加载和处理。
- 常见的解析器阻断资源包括
外部 JavaScript 脚本和外部样式表。 - 解析器阻断资源会延迟整个文档的解析过程和后续资源的请求。
区别： 下面是渲染阻断资源和解析器阻断资源的区别
| 特性 | 渲染阻断资源 | 解析器阻断资源 |
| 作用对象 | 页面的渲染过程 | 页面的解析过程 |
| 阻塞时机 | 在浏览器进行页面渲染之前阻塞 | 在浏览器进行 HTML 解析之前阻塞 |
| 影响范围 | 页面的渲染速度和用户交互能力 | 整个文档的解析速度和后续资源的加载 |
| 常见类型 | 外部样式表和 JavaScript 脚本 | 外部 JavaScript 脚本和外部样式表 |
某些资源可能同时具有
渲染阻断和解析器阻断的特性，具体影响取决于资源的类型和加载顺序。当然，在我们平时开发和项目优化中，我们不需要对资源做是否是
渲染阻断资源和解析器阻断资源的区分。 我们也可以一股脑的认为上述所提出的资源都是阻塞资源。最终的结果就是影响页面的首次渲染和页面交互时间。
查看chromium
如果大家对chrome或者chromium中源码结构或者一些内部实现感兴趣。可以通过Chromium Code Search进行查看。
因为，里面的Chromium的内部实现，有很多并且专业术语也冗余庞杂，如果想了解这块的东西，我们以后可以单出一篇文章，给大家简单介绍一下，如何查看Chromium源码。
WebPageTest
在进行网页性能分析其实有很多工具和插件。例如，Chrome自带的Ligthhouse/Performance/Recorder/Performance insights等。(针对这块也是有很大的学问和实践规范。后期，我们也会有相关的文章和系列)。
而今天的文章的一些图文信息，我们使用WebPageTest。
WebPageTest 是一个免费的在线性能测试工具，用于评估网页加载速度和性能。它可以帮助开发人员和网站管理员分析网页的性能，并提供改进性能的建议。
以下是 WebPageTest 的一些主要特点和功能：
- 多地点测试：
WebPageTest提供了全球各地的测试服务器，可以选择多个地点进行性能测试，以模拟不同地区用户的加载体验。 - 多种浏览器和设备：
WebPageTest支持使用多种浏览器和设备进行测试，包括桌面浏览器（如Chrome、Firefox、Safari）和移动设备浏览器（如iOS和Android）。 - 多种测试选项：
WebPageTest提供了丰富的测试选项，可以对页面加载过程进行详细的性能分析，包括测量页面加载时间、网络请求和响应时间、渲染时间等。 - 完整的性能报告：测试完成后，
WebPageTest会生成详细的性能报告，包括加载时间的时间线图、资源加载顺序、性能指标（如首次字节时间、首次可交互时间等）、页面截图等。 - 延迟和带宽模拟：
WebPageTest允许模拟不同的网络条件，包括延迟和带宽限制，以测试在不同网络环境下的页面加载速度和性能。 - 性能优化建议：
WebPageTest提供了针对页面性能的建议和优化提示，帮助开发人员识别和解决性能瓶颈，改进页面加载速度和用户体验。
WebPageTest 是一个功能强大的性能测试工具，广泛应用于网站开发和优化过程中。通过使用 WebPageTest，开发人员可以更好地了解页面加载过程中的性能瓶颈，并采取相应的优化措施，提升网站的用户体验和性能。
