Web Vitals 库用于真实用户场景采集LCP、FID、CLS、INP等核心指标，需自建上报服务；SPA中须在路由激活时重新注册监听并清除旧回调，MPA则在全局入口初始化；上报应异步节流、批量合并、添加采样。
Web Vitals 库（web-vitals）是 Google 推出的轻量级工具，用于在真实用户场景下采集核心 Web 指标（如 LCP、FID、CLS、INP 等）。它本身不上传数据，需配合自建监控服务或第三方平台使用，在生产环境部署时需兼顾准确性、稳定性与隐私合规。
关键指标采集要覆盖全生命周期
默认情况下 web-vitals 只监听一次指标（如首次 LCP），但单页应用（SPA）中路由切换后内容重绘，需重新注册监听。建议在每次页面/视图激活时调用 onLCP、onINP 等函数，并为每个指标绑定唯一回调：
- 对 SPA：监听路由变化（如
history.pushState或框架的onRouteChange），触发onLCP(cb, { reportAllChanges: true }) - 对多页应用（MPA）：在全局入口（如
<script>同步脚本）中初始化，确保早于渲染执行 - 避免重复注册：每次新监听前清除旧回调（
unobserve()或用闭包管理句柄）
上报策略需平衡及时性与资源开销
直接在指标回调里发网络请求易阻塞主线程或被浏览器限流。推荐异步节流 + 批量上报：
- 使用
setTimeout延迟 1–2 秒再上报，避开首屏渲染高峰 - 将同一批次多个指标（如 LCP + CLS + INP）合并为一个 POST 请求体，减少请求数
- 添加采样控制（如
Math.random() ）降低高流量站点上报压力 - 失败时本地缓存（
localStorage）并在下次页面加载时重试，避免数据丢失
注意跨域与隐私合规细节
上报接口若跨域，需服务端配置 Access-Control-Allow-Origin；若收集 URL 或 referrer，需符合 GDPR / CCPA 要求：
立即学习“Java免费学习笔记（深入）”；
- 自动脱敏：移除 URL 中的 query 参数、hash 片段，保留路径层级即可（如
/shop/product/123→/shop/product/:id） - 禁用敏感字段：设置
reportOpts的includeInvisible为false，避免后台标签页误报 - 用户授权后才启用：与 Consent Manager 集成，仅当用户同意性能追踪时加载并初始化库
错误防御与调试支持不可少
生产环境需主动捕获异常，避免监控逻辑影响业务：
- 所有回调包裹
try/catch，错误日志打点（如console.error('web-vitals error:', e)），但不上报至监控服务以免形成循环 - 添加简易健康检查：定时检测是否成功注册了至少一个指标监听器（如检查
window.__WEB_VITALS_INJECTED__标记） - 开发环境开启
debug: true，并在控制台输出原始指标值，方便比对 RUM 平台数据
不复杂但容易忽略的是：指标值可能因浏览器版本、设备性能、网络条件产生偏差，上线前务必在低端安卓机、弱网模拟、iOS Safari 下交叉验证上报逻辑和数值合理性。
