JavaScript 页面加载指标采集需用 Performance API 与 PerformanceObserver 动态监听 FCP/LCP，早注册于 <head>；结合 performance.timing 分析传统阶段；SPA 中须手动重置 CLS、LCP；上报用 sendBeacon() 并压缩字段。
JavaScript 中收集页面加载指标，核心是利用浏览器原生 Performance API，结合 PerformanceObserver 动态监听关键事件，而非仅靠一次性快照。重点在于捕获真实用户场景下的首屏渲染、内容呈现和可交互时机。
用 PerformanceObserver 监听 paint 类指标
FCP（首次内容绘制）和 LCP（最大内容绘制）必须在页面早期注册监听，否则容易错过首屏关键事件：
- 在
<head>中尽早执行，确保监听器在 DOM 构建前就位 - 监听
'paint'类型获取 FCP，监听'largest-contentful-paint'获取 LCP - LCP 回调中需校验
entry.element是否仍在 DOM 中，避免组件卸载后上报无效节点
通过 performance.timing 补充传统加载阶段
performance.timing 提供导航生命周期各阶段时间戳，适合分析网络与解析瓶颈：
-
domainLookupStart/End→ DNS 查询耗时 -
connectStart/End→ TCP 连接耗时 -
responseStart/End→ 服务端响应与资源接收耗时 -
domContentLoadedEventEnd→ DOM 解析完成时间 -
loadEventEnd→ 页面完全加载时间（含子资源）
注意：该对象在单页应用（SPA）中只反映首次加载，后续路由跳转需配合 history 事件手动重置或补充采集。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“Java免费学习笔记（深入）”；
处理单页应用（SPA）的指标重置
FCP、LCP、CLS 等指标在 SPA 中不会自动重置，若不干预会导致数据失真：
- 每次
pushState或路由变更后，应手动触发 CLS 重置（如调用onCLS(() => {}, { reportAllChanges: true })的 reset 方法） - LCP 需在新页面上下文初始化时重新监听，避免沿用上一页面的旧值
- 推荐使用
web-vitals库 v3+ 版本，它内置了 SPA 路由适配逻辑
上报前压缩并确保送达
采集到的数据需可靠上报，且不能影响页面性能：
- 优先使用
navigator.sendBeacon()，它能在页面卸载前异步发送，避免 fetch 被中断 - payload 必须是
Blob、FormData或URLSearchParams；JSON 字符串需包装为 Blob - 字段名缩写（如
fcp替代firstContentfulPaint），数值用Uint8Array编码减少体积 - 默认仅在生产环境启用，开发阶段关闭监控脚本
