performance api 是零侵入、高精度监控页面渲染性能的原生方案，通过 performanceobserver 监听 paint 和 largest-contentful-paint 事件获取 fcp、lcp 等关键指标，并结合 user timing 手动打点追踪框架局部更新耗时，配合 navigator.sendbeacon() 轻量上报。
直接用 Performance API 监控页面渲染性能，关键在于捕获真实用户视角下的视觉变化节点，而不是依赖模拟或开发工具。它无需注入代码、不干扰业务逻辑，是目前唯一零侵入、高精度的原生方案。
捕获首屏渲染关键时间点
首屏体验由 FP（First Paint）和 FCP（First Contentful Paint）定义，分别代表“开始出像素”和“出现有意义内容”的时刻：
- 用
PerformanceObserver监听'paint'类型条目，必须在内同步执行脚本，否则会错过首帧 - 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()手动计时
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
