第 2 卷

第 2 / 13 卷日期：2026-01-02

3. 第三方工具辅助

除了手动实现，也可使用成熟的第三方工具（无需手动编写捕获逻辑），如：

• Sentry：支持错误捕获、堆栈解析、用户行为关联、告警通知等功能

• 阿里云ARMS、腾讯云前端监控：国内云厂商提供的一站式监控方案

• Fundebug：专注于前端错误监控的SaaS服务

示例（Sentry 快速接入）：

Code block

1	// 1.安装依赖：npm install @sentry/browser @sentry/tracing
2	// 2.初始化
3	import * as Sentry from '@sentry/browser';

4 5Sentry.init({

6	dsn: '你的Sentry DSN地址',//从Sentry后台获取
7	release: 'your-app@1.0.0',//应用版本
8	environment: process.env.NODE_ENV,//环境（prod/test/dev）
9	});

11	// 3.主动捕获错误（可选，自动捕获已覆盖大部分场景）
12	try {
13	//可能出错的代码
14	const a = undefined;
15	a.foo();
16	} catch (error) {
17	Sentry.captureException(error);//主动上报捕获的错误
18	}

三、前端性能监控的常用指标

前端性能监控指标主要分为核心 Web 指标（Core Web Vitals，谷歌主推，反映用户核心体验）和传统性能指标两大类，覆盖页面加载、交互响应等全链路。

1. 核心 Web 指标（Core Web Vitals）

这是衡量用户体验的核心指标，直接影响用户对页面性能的感知：

• LCP（Largest Contentful Paint，最大内容绘制）

定义：页面从开始加载到视口中最大的内容元素完成渲染的时间。

意义：反映页面加载速度，用户能快速看到页面核心内容。
优化目标：≤2.5秒（良好），2.5秒~4秒（需要改进），>4秒（差）。
关注元素：图片、视频、大块文本、div背景图等。

• FID（First Input Delay，首次输入延迟）

定义：用户首次与页面交互（点击按钮、输入文本等）到浏览器开始处理该交互的时间。
意义：反映页面交互响应性，衡量浏览器主线程是否被阻塞。
优化目标：≤100毫秒（良好），100毫秒~300毫秒（需要改进），>300毫秒（差）。
注意：FID 是“过去式”指标，无法衡量页面卸载前的交互，现已逐步被 INP 替代。

• INP（Interaction to Next Paint，交互到下一次绘制）

◦ 定义：衡量所有用户交互的延迟（从用户触发交互到浏览器完成下一次页面绘制的时间），取

其中的第75百分位数。

意义：更全面地反映页面交互流畅度，替代 FID 成为核心指标。
优化目标：≤200毫秒（良好），200毫秒~500毫秒（需要改进），>500毫秒（差）。

• CLS（Cumulative Layout Shift，累积布局偏移）

◦ 定义：衡量页面在加载过程中布局的稳定性，计算所有意外布局偏移的总和（布局偏移分数=偏

移距离×影响区域）。

◦ 意义：反映页面视觉稳定性，避免用户操作时元素突然偏移（如广告插入、图片未设置宽高导

致的布局跳动）。

优化目标：≤0.1（良好），0.1~0.25（需要改进），>0.25（差）。

2. 传统性能指标

补充核心指标之外的关键性能维度，通过 window.performance API 获取：

• FP（First Paint，首次绘制）

◦ 定义：页面从开始加载到浏览器首次绘制像素到屏幕的时间（如背景色渲染），标志着页面开

始可视化。

• FCP（First Contentful Paint，首次内容绘制）

◦ 定义：页面从开始加载到首次渲染出文本、图片、图标等有意义内容的时间，比 FP 更能反映用

户感知的加载速度。

• TTI（Time to Interactive，可交互时间）

◦ 定义：页面从加载开始到所有资源加载完成、主线程空闲，用户可以流畅交互的时间，反映页

面完全可用的时间点。

• TTFB（Time to First Byte，首字节时间）

◦ 定义：浏览器发送请求到接收到服务器返回的第一个字节的时间，反映网络连接、服务器响应

• 资源加载指标

◦ 各类静态资源（脚本、样式、图片、接口）的加载时间、成功/失败率，用于定位慢资源、失败

资源。

• 长任务指标

◦ 主线程中执行时间超过50毫秒的任务（长任务会阻塞交互，导致页面卡顿），通过

PerformanceLongTaskTiming API 捕获。

指标获取示例（基于 window.performance）

Code block

1// 获取核心性能指标 2function getPerformanceMetrics() {

3if (!window.performance) {

4	console.log('当前浏览器不支持performance API');
5	return null;
6	}

8	const performance = window.performance;
9	const timing = performance.timing;
10	const metrics = {
11	// TTFB
12	ttfb: timing.responseStart - timing.requestStart,
13	// FP/FCP（需通过PerformanceObserver获取）
14	fp: 0,
15	fcp: 0,
16	// LCP（需通过PerformanceObserver获取）
17	lcp: 0,
18	// CLS（需通过PerformanceObserver获取）
19	cls: 0
20	};

22	//通过PerformanceObserver监听FP/FCP/LCP/CLS等指标
23	const observer = new PerformanceObserver((list) => {
24	for (const entry of list.getEntries()) {
25	switch (entry.entryType) {
26	case 'paint':
27	if (entry.name === 'first-paint') {
28	metrics.fp = entry.startTime;
29	} else if (entry.name === 'first-contentful-paint') {

全站分卷索引 · 13 卷