Performance Observer 可异步监听页面性能指标，通过指定 entryTypes 实时捕获 LCP、CLS、FP、FCP 等核心 Web Vitals，结合 sendBeacon 上报数据，精准监控用户体验。
要监控网页的关键性能指标，Performance Observer 是现代浏览器提供的一种高效、非阻塞的方式。它能实时监听性能条目（如页面加载、资源加载、首次绘制等），帮助开发者准确掌握用户体验。
了解 Performance Observer 的基本机制
Performance Observer 允许你订阅浏览器记录的性能条目，而不是一次性读取所有数据。当新的性能条目被加入浏览器的性能缓冲区时，观察者会触发回调函数。
关键点：
- 异步监听，不影响主线程性能
- 支持监听多种 entryType，比如 navigation、paint、resource、largest-contentful-paint 等
- 需要显式调用 observe() 方法来指定监听类型
监控核心 Web Vitals 指标
核心 Web Vitals 包括 LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）。利用 Performance Observer 可分别采集这些指标。
监控 LCP 示例：
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'largest-contentful-paint') {
console.log('LCP:', entry.startTime);
}
}
});
observer.observe({ entryTypes: ['largest-contentful-paint'] });
监控 CLS（布局偏移）：
let cumulativeLayoutShiftScore = 0;
const clsObserver = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!entry.hadRecentInput) {
cumulativeLayoutShiftScore += entry.value;
}
}
console.log('当前 CLS 分数:', cumulativeLayoutShiftScore);
});
clsObserver.observe({ entryTypes: ['layout-shift'] });
获取首次绘制与最大绘制时间
通过监听 paint 类型，可以获取关键渲染指标：
const paintObserver = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
console.log('FCP:', entry.startTime);
}
if (entry.name === 'first-paint') {
console.log('FP:', entry.startTime);
}
}
});
paintObserver.observe({ entryTypes: ['paint'] });
注意：FP 和 FCP 属于 paint 类型，但不会出现在 performance.getEntries() 的初始列表中，必须用 Performance Observer 实时捕获。
上报性能数据到服务器
在实际项目中，通常将收集到的数据发送给分析系统：
function sendToAnalytics(metric) {
navigator.sendBeacon('/log', JSON.stringify(metric));
}
// 在 observer 回调中调用
observer.observe({ entryTypes: ['largest-contentful-paint'] });
// 当 LCP 触发后，sendToAnalytics(metric) 上报
使用 navigator.sendBeacon 可确保页面卸载时数据仍能可靠发送。
基本上就这些。合理使用 Performance Observer，能让你精准捕捉用户真实体验的关键瞬间，而不干扰页面运行。重点是选择合适的 entryType 并及时处理回调数据。
