前端性能优化之指标

新公司主要的产品是一款APP，因为公司是一家电商公司，所以APP里90%以上都是Web。单从个人使用体验上看感觉挺慢了，所以就花点时间研究下Web优化。

要做性能优化，首先要有指标，W3C标准中的Performance Timing API提供的数据就可以提供性能相关的指标。

Performance Timing API

PerformanceTiming 接口是为保持向后兼容性而保留的传统接口，并且提供了在加载和使用当前页面期间发生的各种事件的性能计时信息。

如下图，Performance Timing 把浏览器中加载和解析一个HTML文件的详细过程分为 unload、redirect、App Cache、DNS、TCP、Request、Response、Processing、onload 九个阶段其中又包含了过程中的21个事件的时间。

九个阶段

浏览器内部阶段

1. Prompt for unload 提示卸载，卸载已有的页面：输入新的URL之后，浏览器首先需要卸载已有的页面，准备请求新的页面
2. redirect 重定向开始处理URL，判断是否本地重定向
   1. unload 重定向过程中执行，卸载上一个页面，清除内存和屏幕上的内容
3. App cache 本地缓存，如果本地中有所需的文件，直接跳到Processing阶段

网络

4. DNS 域名解析
5. TCP TCP连接
6. Request HTTP 请求

服务器

7. Response 返回响应

浏览器渲染

8. Processing Dom加载与解析
9. onload 加载完成后触发onload事件

21个事件

1. PerformanceTiming.navigationStart

   是一个无符号 long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载 (unload) 结束时的 UNIX 时间戳。如果没有上一个文档，这个值会和 PerformanceTiming.fetchStart 相同。

2. PerformanceTiming.unloadEventStart

   是一个无符号 long long 型的毫秒数，表征了unload事件抛出时的 UNIX 时间戳。如果没有上一个文档，或则前一个文档或最后一个重定向的是一个不同源，这个值会返回 0.

3. PerformanceTiming.unloadEventEnd

   是一个无符号 long long 型的毫秒数，表征了unload事件处理完成时的 UNIX 时间戳。如果没有上一个文档，或则前一个文档或最后一个重定向的是一个不同源，这个值会返回 0.

4. PerformanceTiming.redirectStart

   是一个无符号 long long 型的毫秒数，表征了第一个 HTTP 重定向开始时的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回 0.

5. PerformanceTiming.redirectEnd

   是一个无符号 long long 型的毫秒数，表征了最后一个 HTTP 重定向完成时（也就是说是 HTTP 响应的最后一个比特直接被收到的时间）的 UNIX 时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回 0.

6. PerformanceTiming.fetchStart

   是一个无符号 long long 型的毫秒数，表征了浏览器准备好使用 HTTP 请求来获取 (fetch) 文档的 UNIX 时间戳。这个时间点会在检查任何应用缓存之前。

7. PerformanceTiming.domainLookupStart

   是一个无符号 long long 型的毫秒数，表征了域名查询开始的 UNIX 时间戳。如果使用了持续连接 (persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart 一致。

8. PerformanceTiming.domainLookupEnd

   是一个无符号 long long 型的毫秒数，表征了域名查询结束的 UNIX 时间戳。如果使用了持续连接 (persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart 一致。

9. PerformanceTiming.connectStart

   是一个无符号 long long 型的毫秒数，返回 HTTP 请求开始向服务器发送时的 Unix 毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于 fetchStart 属性的值。

10. PerformanceTiming.connectEnd

    是一个无符号 long long 型的毫秒数，返回浏览器与服务器之间的连接建立时的 Unix 毫秒时间戳。如果建立的是持久连接，则返回值等同于 fetchStart 属性的值。连接建立指的是所有握手和认证过程全部结束。

11. PerformanceTiming.secureConnectionStart

    是一个无符号 long long 型的毫秒数，返回浏览器与服务器开始安全链接的握手时的 Unix 毫秒时间戳。如果当前网页不要求安全连接，则返回 0。

12. PerformanceTiming.requestStart

    是一个无符号 long long 型的毫秒数，返回浏览器向服务器发出 HTTP 请求时（或开始读取本地缓存时）的 Unix 毫秒时间戳。

13. PerformanceTiming.responseStart

    是一个无符号 long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的 Unix 毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。

14. PerformanceTiming.responseEnd

    是一个无符号 long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前 HTTP 连接已经关闭，则返回关闭时）的 Unix 毫秒时间戳。

15. PerformanceTiming.domLoading

    是一个无符号 long long 型的毫秒数，返回当前网页 DOM 结构开始解析时（即[Document.readyState)属性变为“loading”、相应的 readystatechange事件触发时）的 Unix 毫秒时间戳。

16. PerformanceTiming.domInteractive

    是一个无符号 long long 型的毫秒数，返回当前网页 DOM 结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的 Unix 毫秒时间戳。

17. PerformanceTiming.domContentLoadedEventStart

    是一个无符号 long long 型的毫秒数，返回当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的 Unix 毫秒时间戳。

18. PerformanceTiming.domContentLoadedEventEnd

    是一个无符号 long long 型的毫秒数，返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的 Unix 毫秒时间戳。

19. PerformanceTiming.domComplete

    是一个无符号 long long 型的毫秒数，返回当前文档解析完成，即Document.readyState变为 complete且相对应的readystatechange 被触发时的 Unix 毫秒时间戳。

20. PerformanceTiming.loadEventStart

    是一个无符号 long long 型的毫秒数，返回该文档下，load事件被发送时的 Unix 毫秒时间戳。如果这个事件还未被发送，它的值将会是 0。

21. PerformanceTiming.loadEventEnd

    是一个无符号 long long 型的毫秒数，返回当load事件结束，即加载事件完成时的 Unix 毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是 0。

指标

1. DNS 查询耗时：domainLookupEnd - domainLookupStart
2. TCP 连接耗时：connectEnd - connectStart
3. trans 响应：responseEnd - responseStart
4. res 内容加载耗时：responseEnd - requestStart
5. TTFB （首包时间：responseStart - requestStart
6. FPT First Paint Time 首次渲染时间 / 白屏时间：responseEnd – fetchStart
7. TTI/FIT（Time to Interact/first time input 首次可交互时间）：domInteractive – fetchStart
8. dom 解析耗时：domInteractive - responseEnd
9. L 页面完全加载时间：loadEventStart – fetchStart
10. FID 首次输入延迟：指标衡量的是从用户首次与您的网站进行交互（即当他们单击链接，点击按钮等）到浏览器实际能够访问之间的时间
11. LCP 大内容渲染：衡量viewport内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素
12. FP 第一个像素绘制（白屏时间）
13. FCP 首次内容绘制（首屏时间）：标记浏览器渲染来自 DOM 第一个内容的时间点，该内容可能是文本、图像、SVG 甚至 元素
14. DCL dom本完全加载和解析：domContentLoadedEventStart - fetchStart
15. CLS 累积布局偏移：CLS是测量在页面整个生命周期中发生的每个元素布局变化的分数总和
16. FMP 首次有效绘制：页面主角元素的首次有效绘制。例如，在 bilibili 上，主角元素就是视频元素；微博的博文是主要元素
17. TBT 页面阻塞总时长：TBT汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总。
18. INP 页面整体交互延迟：用户访问一个页面时发生的一个最长的交互。对于总共少于50个交互的页面，INP是延迟最差的交互。对于有许多交互的页面，INP通常是交互延迟的第98个百分点。

这么多指标，到底应该关注哪些呢？如下图是 google 推荐的用户体验需要关注的指标并分了三个区间体验好、需要提升、体验差。