《浏览器原理》学习笔记Day73

加载阶段性能：使用Audits来优化Web性能

到底什么是 Web 性能?

Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。
从两个阶段考虑：

• ⻚面加载阶段；

• ⻚面交互阶段。

  性能检测工具：Performance vs Audits

  Chrome：Performance 和 Audits，

  检测之前准备工作

  首先准备 Chrome Canary 版的浏览器，Chrome Canary 是采用最新技术构建的，它的开发者工具和浏览器特性都是最新的，所以我推荐你使用 Chrome Canary 来做性能分析。当然你也可以使用稳定版的 Chrome。然后我们需要在 Chrome 的隐身模式下工作，这样可以确保我们安装的扩展、浏览器缓存、Cookie 等数据不会影响到检测结果。

  利用Audits生成Web性能报告

• 首先我们打开浏览器的隐身窗口，Windows 系统下面的快捷键是 Control+Shift+N，Mac 系统下面的快捷键是 Command+Shift+N。
• 然后在隐身窗口中输入 B 站的网站。

• 打开 Chrome 的开发者工具，选择 Audits 标签。
  在生成报告之前，我们需要先配置 Audits，配置模块主要有两部分组成，一个是监测类型 (Categories)，另外一个是设备类型(Device)
  监控类型 (Categories) 是指需要监控哪些内容，对应5个选项：
  监测并分析 Web 性能 (Performance)；
  监测并分析 PWA(Progressive Web App) 程序的性能；
  监测并分析 Web 应用是否采用了最佳实践策略 (Best practices)；
  监测并分析是否实施了无障碍功能 (Accessibility)，  无障碍功能让一些身体有障碍的人可以方便地浏览你的 Web 应用。
  检测并分析Web应用是否实施了SEO搜索引擎优化（SEO）。
  设备 (Device) 部分，提供了两个选项：
  Moblie 选项是用来模拟移动设备环境的，另外一个 Desktop 选项是用来模拟桌面环境的。

  解读性能报告

  Audits生成的最终的分析报告如下图：

报告的第一个部分是性能指标 (Metrics)，如下图所示：

观察上图，我们可以发现性能指标下面一共有六项内容，这六项内容分别对应了从 Web 应用的加载到⻚面展示完成的这段时间中，各个阶段所消耗的时⻓。在中间还有一个 ViewTrace 按钮，点击该按钮可以跳转到 Performance 标签，并且查看这些阶段在Performance 中所对应的位置。最下方是加载过程中各个时间段的屏幕截图。
报告的第二个部分是可优化项 (Opportunities)

这些可优化项是 Audits 发现⻚面中的一些可以直接优化的部分，你可以对照 Audits 给的这些提示来优化你的 Web 应用。
报告的第三部分是手动诊断 (Diagnostics)

在手动诊断部分，采集了一些可能存在性能问题的指标，这些指标可能会影响到⻚面的加载性能，Audits 把详情列出来，并让你依据实际情况，来手动排查每一项。
报告的最后一部分是运行时设置 (Runtime Settings)

根据性能报告优化 Web 性能

性能指标的分数是由六项指标决定的，它们分别是：

1. 首次绘制 (First Paint)；
2. 首次有效绘制 (First Meaningfull Paint)；
3. 首屏时间 (Speed Index)；
4. 首次 CPU 空闲时间 (First CPU Idle)；
5. 完全可交互时间 (Time to Interactive)；
6. 最大估计输入延时 (Max Potential First Input Delay)。

第一项指标 FP，如果 FP 时间过久，那么直接说明了一个问题，那就是⻚面的 HTML 文件可能由于网络原因导致加载时间过久
第二项是 FMP，上面也提到过由于 FMP 计算复杂，所以现在不建议使用该指标了，另外由于 LCP 的计算规则简单，所以推荐使用 LCP 指标。
第三项是首屏时间 (Speed Index)，这就是我们上面提到的 LCP，它表示填满首屏⻚面所消耗的时间，首屏时间的值越大，那么加载速度越慢，具体的优化方式同优化第二项 FMP
是一样。
第四项是首次 CPU 空闲时间 (First CPU Idle)，也称为 First Interactive，它表示⻚面达到最小化可交互的时间，也就是说并不需要等到⻚面上的所有元素都可交互，只要可以对大部分用户输入做出响应即可。要缩短首次 CPU 空闲时⻓，我们就需要尽可能快地加载完关键资源，尽可能快地渲染出来首屏内容。
第五项是完全可交互时间 (Time to Interactive)，简称 TTI，它表示⻚面中所有元素都达到了可交互的时⻓。简单理解就这时候⻚面的内容已经完全显示出来了，所有的 JavaScript事件已经注册完成，⻚面能够对用户的交互做出快速响应，通常满足响应速度在 50 毫秒以内。如果要解决 TTI 时间过久的问题，我们可以推迟执行一些和生成⻚面无关的
JavaScript 工作。
第六项是最大估计输入延时 (Max Potential First Input Delay），这个指标是估计你的
Web ⻚面在加载最繁忙的阶段， 窗口中响应用户输入所需的时间，为了改善该指标，一方面可以使用WorkWorker来计算，从而释放主线程。另一个有用的措施是重构CSS选择器，让它们执行较少计算。

此文章为5月Day5学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪