狠狠地研究了下 PerformanceObserver API
💡
原文中文，约6500字，阅读约需16分钟。
📝
内容提要
本文介绍了PerformanceObserver家族中的PerformanceObserver对象，它可以观察页面的各项性能指标。文章列举了PerformanceObserver支持的性能指标，并提供了示例代码演示如何使用PerformanceObserver来观察页面的首次渲染时间、最大内容渲染元素以及用户首次交互时间。此外，文章还介绍了PerformanceMark和PerformanceMeasure对象，它们可以用来标记和测量时间线上的性能。作者总结道，了解PerformanceObserver对于排查页面卡顿和性能统计与上报是有帮助的，但在正常开发中，浏览器性能已经足够流畅。
🎯
关键要点
- PerformanceObserver对象用于观察页面的各项性能指标。
- Performance API是一个庞大的家族，PerformanceObserver是其中重要的一部分。
- PerformanceObserver支持多种性能指标，包括用户交互时间、最大内容渲染元素等。
- 核心性能指标包括LCP（最大内容绘制）、FID（首次输入延迟）和CLS（累积布局偏移）。
- 可以通过PerformanceObserver观察'paint'类型的性能指标，获取首次渲染时间。
- largest-contentful-paint是重要的性能指标，目前仅Chrome支持。
- first-input指标用于获取用户首次交互的时间，可以帮助统计用户行为。
- PerformanceMark和PerformanceMeasure对象用于标记和测量时间线上的性能。
- 了解PerformanceObserver有助于排查页面卡顿和进行性能统计，但在正常开发中，浏览器性能通常已足够流畅。
➡️
