前端项目怎么做性能监控？Core Web Vitals 怎么采集上报？

Question

仓乃文 · Accepted Answer

性能监控的核心是采集 Core Web Vitals（LCP、FID/INP、CLS）三大指标，加上自定义的业务指标。采集只是第一步，更重要的是建立性能基线和告警机制，性能劣化时能第一时间发现。 Core Web Vitals 采集： ```typescript // 使用 web-vitals 库（Google 官方推荐） import { onLCP, onFID, onCLS, onINP, onTTFB } from "web-vitals"; function reportMetric(metric: Metric) { const body = JSON.stringify({ name: metric.name, // LCP / FID / CLS / INP / TTFB value: metric.value, // 数值（毫秒或无单位） rating: metric.rating, // good / needs-improvement / poor delta: metric.delta, // 与上次差值 navigationType: metric.navigationType, url: location.href, timestamp: Date.now(), }); // 使用 sendBeacon 上报，页面卸载时不丢失 if (navigator.sendBeacon) { navigator.sendBeacon("/api/metrics", body); } else { fetch("/api/metrics", { body, method: "POST", keepalive: true }); } } onLCP(reportMetric); onFID(reportMetric); onCLS(reportMetric); onINP(reportMetric); // 2024 年替代 FID onTTFB(reportMetric); ``` 指标阈值： ``` | 指标 | 含义 | Good | Needs Improvement | Poor | |-------|-------------------|---------|-------------------|---------| | LCP | 最大内容绘制 | <=2.5s | <=4s | >4s | | INP | 交互响应延迟 | <=200ms | <=500ms | >500ms | | CLS | 累积布局偏移 | <=0.1 | <=0.25 | >0.25 | | TTFB | 首字节时间 | <=800ms | <=1800ms | >1800ms | ``` 自定义性能采集： ```typescript // 关键业务节点打点 const perf = { pageStart: performance.now(), mark(name: string) { performance.mark(name); }, measure(name: string, start: string, end?: string) { performance.measure(name, start, end || ""); const duration = performance.getEntriesByName(name)[0].duration; reportMetric({ name: `custom_${name}`, value: duration, rating: duration < 1000 ? "good" : duration < 3000 ? "needs-improvement" : "poor", }); }, }; // 使用 perf.mark("data_fetch_start"); await fetchUserData(); perf.mark("data_fetch_end"); perf.measure("data_fetch", "data_fetch_start", "data_fetch_end"); ``` 补充说明： - INP 已替代 FID 成为新的响应性指标（2024 年 3 月） - sendBeacon 有 64KB 大小限制，数据量大时用 fetch + keepalive - 采样率建议：生产环境 10%-30%，避免上报量过大 - 推荐用 Grafana + Prometheus 搭建监控看板，设置告警阈值