PerformanceObserver 监测页面性能指标
如何使用 PerformanceObserver 监测 FP、FCP、LCP、FID、CLS 等 Core Web Vitals 指标？supportedEntryTypes 有哪些类型？如何获取资源加载时序？
回答
我还是少年
new PerformanceObserver(list => list.getEntries().forEach(e => {})).observe({type: 'paint'})。entryTypes: paint(FP/FCP)、largest-contentful-paint(LCP)、first-input(FID)、layout-shift(CLS)、resource、navigation、mark/measure、longtask。LCP: type largest-contentful-paint，取 renderTime 或 loadTime。CLS: type layout-shift，累加所有非用户交互导致的 shift 值。FID: type first-input，取 processingStart - startTime。PerformanceObserver 比 getEntries() 更优：可订阅增量更新，避免轮询；buffer 选项可获取页面加载前产生的指标。注意：某些 type 需页面支持相应 Header(如 Timing-Allow-Origin)。