生产环境前端性能监控需兼顾精准采集、安全上报与自身轻量，须用PerformanceObserver早期监听paint/navigation/resource/longtask四类指标，SPA中重置CLS、校验LCP元素有效性，用sendBeacon压缩上报，监控脚本需节流且仅生产启用。
在生产环境中监控并上报前端运行时性能数据，核心是「精准采集 + 安全上报 + 自身轻量」。不能靠加个 SDK 就完事，得从监听时机、指标有效性、传输可靠性、脚本开销四个层面系统设计。
用 PerformanceObserver 动态监听关键指标
别依赖 performance.getEntries()，它只能读取调用时刻已存在的条目，会漏掉后续触发的资源加载或绘制事件。必须在页面早期（如 <head> 中）注册 PerformanceObserver，监听四类 entryType：
- paint：获取 FCP、LCP 等渲染指标
- navigation：拿到 FP、TTFB、domInteractive 等导航阶段数据
- resource：监控图片、CSS、JS 等静态资源加载耗时与状态码
-
longtask：配合
timeout: 50配置，捕获 ≥50ms 的长任务（默认 100ms 太迟钝）
对单页应用（SPA），每次路由跳转后需手动重置 CLS 状态，并检查 LCP 元素是否仍在 DOM 中，避免销毁组件后仍上报无效节点。
确保关键指标不被误报或失效
Web Vitals 类指标（FCP/LCP/CLS）容易在 SPA 场景下失真：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- FCP 可能早于 JS 执行（尤其 SSR 页面），应在
document.readyState === 'interactive'后再初始化监听 - CLS 在路由切换后会持续累加，需调用
onCLS({ reportAllChanges: true }).reset()（v3+ 支持） - LCP 回调中要校验
entries[entries.length - 1].element?.isConnected，否则可能上报已卸载的旧元素
用 sendBeacon 可靠上报，且必须压缩数据
用户关闭标签页或跳转时，fetch 和 XMLHttpRequest 极大概率被浏览器终止。唯一被规范保证「尽力发送」的是 navigator.sendBeacon()：
- 只支持 POST，payload 必须是
ArrayBuffer、Blob、FormData或URLSearchParams - 禁止直接传 JSON 字符串，可封装为
new Blob([JSON.stringify(data)], {type: 'application/json'}) - 上报前务必缩写字段名（如
lcp替代largestContentfulPaint），数值用Uint8Array编码，减少体积
监控脚本自身不能拖慢页面
监控代码若频繁采样、未节流、或在低端安卓机上轮询堆栈，反而会拉低 FPS、延长 TTI：
- 默认仅在生产环境启用：
process.env.NODE_ENV === 'production' - 脚本懒加载，且与框架生命周期对齐（如 Vue 的
app.config.errorHandler、React 的ErrorBoundary） - 对高频回调（如帧率检测、CLS 累积）做节流，间隔不低于 100ms
