WEB性能分析

（一）什么是web性能？

Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。

（二）web性能查看工具

Chrome 为我们提供了非常完善的性能检测工具：Performance 和 Audits，它们能够准确统计页面在加载阶段和运行阶段的一些核心数据，诸如任务执行记录、首屏展示花费的时长等，

（三）Audits 使用：利用 Audits 生成 Web 性能报告

在Chrome无痕模式下，（Chrome开启无痕模式，右侧三个点，打开新的无痕窗口）

 我们需要先配置 Audits，配置模块主要有两部分组成，一个是监测类型 (Categories)，另外一个是设备类型 (Device)。

监控类型 (Categories) 是指需要监控哪些内容，这里有五个对应的选项，它们的功能分别是：

1. 监测并分析 Web 性能 (Performance)；

2. 监测并分析 PWA(Progressive Web App) 程序的性能；

3. 监测并分析 Web 应用是否采用了最佳实践策略 (Best practices)；

4. 监测并分析是否实施了无障碍功能 (Accessibility)，无障碍功能让一些身体有障碍的人可以方便地浏览你的 Web 应用。

5. 监测并分析 Web 应用是否采实施了 SEO 搜素引擎优化 (SEO)。

配置好，勾选好后，点击生成报告（这个要*。。。）

根据性能报告优化 Web 性能现在有了性能报告，接下来我们就可以依据报告来分析如何优化 Web 应用了。最直接的方式是想办法提高性能指标的分数，而性能指标的分数是由六项指标决定的，它们分别是：

1. 首次绘制 (First Paint)；

在渲染进程确认要渲染当前的请求后，渲染进程会创建一个空白页面，我们把创建空白页面的这个时间点称为 First Paint，简称 FP。

2. 首次有效绘制 (First Meaningfull Paint)；

关键资源包括 JavaScript 文件和 CSS 文件，因为关键资源会阻塞页面的渲染，所以需要等待关键资源加载完成后，才能执行进一步的页面绘制。当页面中绘制了第一个像素时，我们把这个时间点称为 First Content Paint，简称 FCP。

3. 首屏时间 (Speed Index)；

接下来继续执行 JavaScript 脚本，当首屏内容完全绘制完成时，我们把这个时间点称为 Largest Content Paint，简称 LCP。

接下来 JavaScript 脚本执行结束，渲染进程判断该页面的 DOM 生成完毕，于是触发 DOMContentLoad 事件。等所有资源都加载结束之后，再触发 onload 事件。

4. 首次 CPU 空闲时间 (First CPU Idle)；

它表示页面达到最小化可交互的时间，也就是说并不需要等到页面上的所有元素都可交互，只要可以对大部分用户输入做出响应即可。

5. 完全可交互时间 (Time to Interactive)；

它表示页面中所有元素都达到了可交互的时长。简单理解就这时候页面的内容已经完全显示出来了，所有的 JavaScript 事件已经注册完成，页面能够对用户的交互做出快速响应，通常满足响应速度在 50 毫秒以内。

6. 最大估计输入延时 (Max Potential First Input Delay)。

这个指标是估计你的 Web 页面在加载最繁忙的阶段， 窗口中响应用户输入所需的时间，