PerformanceObserver 是浏览器原生轻量级性能采集接口，支持监听 LCP、CLS、FCP 等 Web Vitals 指标，需启用 buffered 模式、过滤无效条目、结构化上报，并做兼容性兜底。
PerformanceObserver 是浏览器原生支持的轻量级性能采集接口，不依赖第三方 SDK，能直接捕获真实用户环境下的关键指标（如 FCP、LCP、CLS、TTFB 等），非常适合嵌入前端监控体系，自动生成可落地的性能审计报告。
监听核心 Web Vitals 指标
Web Vitals 是衡量用户体验的核心指标，PerformanceObserver 可原生监听其中三项：largest-contentful-paint、layout-shift、paint。只需一次注册，即可持续捕获：
- 使用 entryTypes: ['largest-contentful-paint', 'layout-shift', 'paint'] 同时开启 LCP、CLS 和 FCP/FP 监听
- LCP 必须取每次回调中 entries[entries.length - 1] 的 startTime，因候选元素会动态更新
- CLS 需过滤 hadRecentInput === false 的条目，避免将用户交互后的布局偏移计入总分
- FCP 和 FP 可从 paint 类型条目中通过 entry.name === 'first-contentful-paint' 或 'first-paint' 精准识别
确保数据完整：启用 buffered 模式
页面加载初期发生的性能事件（如首屏渲染、首图加载偏移）可能在 observer 创建前就已记录。若不启用缓冲，这些关键数据将丢失：
- 创建 observer 时传入 { buffered: true } 选项，使 observer 自动读取历史条目
- 对 SPA 应用，在路由切换后建议调用 observer.takeRecords() 清空旧数据，并重置统计上下文
- 首次回调中可能包含多个 paint 或 layout-shift 条目，需遍历处理，不可只取首个
自动上报与报告生成
采集到原始数据后，需结构化聚合并可靠上报，才能支撑后续分析与告警：
- 在回调中按 entryType 分支处理：LCP 取最终值，CLS 累加有效 value，FCP 取首次命中值
- 附加元信息：当前 URL、设备宽度（screen.width）、是否为 SPA 子路由（location.pathname）、UA 片段
- 优先使用 navigator.sendBeacon() 上报，确保页面卸载前仍能发出数据；降级方案可用 fetch + keepalive
- 服务端接收后，可按天/小时聚合生成趋势图、TOP 慢页清单、CLS 突增页面定位等自动化报告
兼容性兜底与降级策略
并非所有浏览器都完整支持所有 entryType，尤其 Safari 对 layout-shift 和 largest-contentful-paint 的支持较晚（16.4+）：
- 注册前检测能力：'layoutShift' in PerformanceObserver.prototype 和 'largestContentfulPaint' in PerformanceObserver.prototype
- 不支持时可 fallback 到 performance.getEntriesByType() 定时轮询（如每 500ms），但会漏掉首屏早期事件
- 对 navigation 和 resource 类型，几乎所有现代浏览器均支持，可作为基础指标保底采集
- 建议搭配 performance.timing（如 domContentLoadedEventEnd）做交叉验证，提升数据可信度
