前端首屏性能体检：从 0 到 1 建立 Core Web Vitals 指标库

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

前端首屏性能体检：从 0 到 1 建立 Core Web Vitals 指标库

在很多前端团队中，“性能优化”往往沦为一种运动式的临时救火：业务反馈页面卡了，工程师抓耳挠腮改两天代码，随后又陷入漫长的不确定状态——到底优化了多少？哪些用户变快了？新功能上线后有没有引起性能回退？

没有量化，就没有改进。

Google 提出的 Core Web Vitals（核心网页指标，简称 CWV） 为全球 Web 性能建立了统一的标准度量衡：

• LCP（最大内容绘制）：衡量加载体验；
• INP（交互到下次绘制）：衡量交互响应灵敏度；
• CLS（累积布局偏移）：衡量视觉稳定性。

从 0 到 1 搭建一套工业级的前端 CWV 真实用户性能监控（RUM, Real User Monitoring）指标库与上报管道，是前端团队走向工程化成熟的关键里程碑。

Core Web Vitals 三大核心黄金指标及健康基线

flowchart LR
subgraph CWV [Core Web Vitals 黄金三角]
LCP["LCP (加载体验): 优秀 < 2.5s | 差 > 4.0s"]
INP["INP (交互响应): 优秀 < 200ms | 差 > 500ms"]
CLS["CLS (视觉稳定): 优秀 < 0.1 | 差 > 0.25"]
end
LCP –> Analytics[RUM 聚合分析中心]
INP –> Analytics
CLS –> Analytics
Analytics –> Dashboard[Grafana / Datadog 性能大盘]

工业级 RUM 指标采集 SDK 完整实战

借助官方标准库 web-vitals，并结合网络状态（Network Information API）、设备内存（Device Memory）与页面生命周期（Page Lifecycle）进行高维度全量采样：

import { onLCP, onINP, onCLS, onFCP, onTTFB, Metric } from 'web-vitals';

export interface PerformancePayload {
metricName: string;
value: number;
rating: 'good' | 'needs-improvement' | 'poor';
delta: number;
id: string;
navigationType: string;
context: {
url: string;
userAgent: string;
effectiveType?: string; // 4g, 3g, 2g
downlink?: number; // Mbps
rtt?: number; // 往返时延 ms
deviceMemory?: number; // GB
hardwareConcurrency?: number; // CPU 核心数
timestamp: number;
};
}

export class WebVitalsReporter {
private endpoint: string;
private queue: PerformancePayload[] = [];
private flushTimer: any = null;

constructor(endpoint = '/api/telemetry/web-vitals') {
this.endpoint = endpoint;
this.initMetricsCollection();
this.setupLifecycleFlush();
}

private initMetricsCollection() {
const handleMetric = (metric: Metric) => {
const payload: PerformancePayload = {
metricName: metric.name,
value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
rating: metric.rating,
delta: Math.round(metric.delta),
id: metric.id,
navigationType: metric.navigationType || 'navigate',
context: this.collectSystemContext(),
};

this.queue.push(payload);
this.scheduleFlush();
};

// 监听全量核心与辅助指标
onLCP(handleMetric);
onINP(handleMetric);
onCLS(handleMetric);
onFCP(handleMetric);
onTTFB(handleMetric);
}

private collectSystemContext() {
const nav = navigator as any;
const conn = nav.connection || nav.mozConnection || nav.webkitConnection;

return {
url: window.location.href,
userAgent: navigator.userAgent,
effectiveType: conn?.effectiveType,
downlink: conn?.downlink,
rtt: conn?.rtt,
deviceMemory: nav.deviceMemory,
hardwareConcurrency: navigator.hardwareConcurrency,
timestamp: Date.now(),
};
}

// 批量合并上报防抖
private scheduleFlush() {
if (this.flushTimer) return;
this.flushTimer = setTimeout(() => {
this.flush();
}, 3000);
}

private flush() {
if (this.queue.length === 0) return;
const dataToSend = this.queue.splice(0);

// 优先使用 sendBeacon 保证在页面卸载/后台切走时 100% 可靠送达
const blob = new Blob([JSON.stringify(dataToSend)], { type: 'application/json' });
if (navigator.sendBeacon) {
navigator.sendBeacon(this.endpoint, blob);
} else {
fetch(this.endpoint, {
method: 'POST',
body: blob,
keepalive: true,
}).catch(() => {});
}

this.flushTimer = null;
}

// 页面进入后台或销毁时立即清空队列
private setupLifecycleFlush() {
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
this.flush();
}
});
window.addEventListener('pagehide', () => this.flush());
}
}

数据大盘分析与 75 分位数（P75）基准判定

收集到日志后，在后端分析时必须遵循行业黄金标准：

建立从采集、上报、聚合到告警的性能指标全链路，让前端体验的每一次微小跃升都有据可依、清晰可见。