性能优化的重要性不言而喻，Google 的研究表明，当网站达到核心 Web 指标（Core Web Vitals）阈值时，用户放弃加载网页的可能性会降低 24%。

　　如何科学地定位到网页的性能瓶颈，就需要找到一个合理的方式来测量和监控页面的性能，确定优化的方向。

　　前端的性能监控分为 2 种：

• 种是合成监控（Synthetic Monitoring，SYN），模拟网页加载或脚本运行等方式来测量网页性能，输出性能报告以供参考，常用的工具有 Chrome DevTools 的 Performance 面板、Lighthouse、WebPageTest 等。
• 第二种是真实用户监控（Real User Monitoring，RUM），采集真实用户所访问到的页面数据，通过 Performance、PerformanceObserver 等 API 计算得到想要的性能参数，各种第三方的性能监控的 SDK 就属于此类。

　　本文的示例代码摘取自 shin-monitor，一款开源的前端监控脚本。

　　为了便于记忆，特将此系列的所有重点内容浓缩成一张思维导图。

一、Performance

　　W3C 在 2012 年制订了版测量网页性能的规范：Navigation Timing。下图提供了页面各阶段可用的性能计时参数。

　　注意，若重定向是非同源，那么带下划线的 redirectStart、redirectEnd、unloadStart、unloadEnd 四个值将一直都是 0。

　　W3C 在几年后又制订了第二版的规范：Navigation Timing Level 2，如下图所示。

　　注意，在浏览器中，读取 unloadEventStart 的值后，会发现这个时间点并不会像图中那样在 fetchStart 之前，因为 unload 不会阻塞页面加载。

　　接下来，会用代码来演示性能参数的计算，后文中的 navigationStart 参数其实就是 startTime。

1）性能对象

　　版获取性能参数的方法是调用 performance.timing，第二版的方法是调用 performance.getEntriesByType('navigation')[0]。

　　前者得到一个 PerformanceTiming 对象，后者得到一个 PerformanceNavigationTiming 对象。

　　在下面的代码中，若当前浏览器不支持第二版，则回退到版。不过，目前主流的浏览器对版的支持也比较好。

const timing = performance.getEntriesByType('navigation')[0] || performance.timing;