Performance API 是零侵入、高精度监控页面渲染性能的原生方案，通过 PerformanceObserver 监听 paint 和 largest-contentful-paint 事件获取 FCP、LCP 等关键指标，并结合 User Timing 手动打点追踪框架局部更新耗时，配合 navigator.sendBeacon() 轻量上报。
直接用 Performance API 监控页面渲染性能，关键在于捕获真实用户视角下的视觉变化节点，而不是依赖模拟或开发工具。它无需注入代码、不干扰业务逻辑，是目前唯一零侵入、高精度的原生方案。
捕获首屏渲染关键时间点
首屏体验由 FP（First Paint）和 FCP（First Contentful Paint）定义，分别代表“开始出像素”和“出现有意义内容”的时刻：
- 用
PerformanceObserver监听'paint'类型条目，必须在<head>内同步执行脚本，否则会错过首帧 - FCP 时间取
entry.startTime，单位毫秒，相对performance.timeOrigin - Safari 15.4+、Firefox 59+、Chrome 60+ 才完整支持；旧环境可降级用
domContentLoadedEventStart粗略估算
追踪局部更新（如 React/Vue Patch）耗时
Patch 不是浏览器标准事件，需结合框架生命周期 + User Timing 手动打点：
- 在更新逻辑开始处调用
performance.mark('patch-start')（例如useEffect或componentDidUpdate） - 确保 DOM 真正更新完成后再打结束点，推荐用
requestIdleCallback或setTimeout(() => {}, 0) - 立即执行
performance.measure('patch-duration', 'patch-start', 'patch-end')，后续通过performance.getEntriesByName('patch-duration')提取耗时
监控最大内容绘制（LCP）
LCP 衡量主内容加载完成时间，对用户体验影响显著：
- 单独监听
'largest-contentful-paint'类型，不能和'paint'混用同一 observer - LCP 可能被后续更大元素覆盖，稳定值应取
list.getEntries().pop() - 务必在页面早期注册 observer，延迟注册等于放弃采集
上报策略与兼容性处理
数据要轻量、可靠、有上下文：
- 只对 FCP、LCP、自定义
patch-duration这三类指标采样上报（如 5% 用户） - 当单次 patch > 100ms 或 FCP > 2s 时，触发全量采集并带上路由、设备类型、网络类型等上下文
- 用
navigator.sendBeacon()上报，避免卸载丢失；数据体控制在 1KB 内，仅传name、startTime、duration、type - 检测
PerformanceObserver和getEntriesByType('paint')是否可用，不可用则跳过或回退到performance.now()手动计时
