第 6 卷

第 6 / 7 卷日期：2025-12-31

◦ Performance 面板：录制页面加载和运行过程，分析帧率、主线程阻塞、回流重绘、JS 执行时

◦ Network 面板：监控所有资源的加载时间、大小、请求状态，分析资源加载瓶颈（如大文件加

载慢、请求阻塞）

◦ Layers 面板：查看页面的合成层，分析 GPU 加速情况

◦ Console 面板：通过 console.time() / console.timeEnd() 手动测试代码执行时间

◦ Performance Insights 面板：更简洁的性能分析面板，适合快速定位首屏加载、交互卡顿问题

• Chrome Lighthouse

◦ 内置在 Chrome DevTools 中（Audits 面板），可生成全面的性能报告，包含核心 Web 指标

（LCP、FID、CLS）、SEO、可访问性等评分，并给出优化建议

◦ 支持手动运行，也可集成到 CI/CD 流程中，实现自动化性能监控

第三方工具/库

• Web Vitals：Google 推出的前端性能监控库，专门用于监控核心 Web 指标（LCP、FID、CLS、

INP），可将数据上报到自定义服务端

• Sentry：不仅支持错误监控，还支持性能监控，可跟踪页面加载、API 请求、函数执行的耗时，定

位线上性能问题

• New Relic：企业级应用性能监控工具，支持前端、后端全链路性能监控

• Fiddler：网络抓包工具，监控 HTTP/HTTPS 请求，分析资源加载和接口性能问题

页面性能监控方法

页面性能监控分为「手动监控（开发阶段）」和「自动监控（线上阶段）」两类：

开发阶段：手动监控（定位性能瓶颈）
使用 Chrome DevTools Performance 面板

◦ 步骤：打开 DevTools → 切换到 Performance → 点击 Record 按钮 → 操作页面 → 停止录制

分析报告

◦ 关注指标：FPS（帧率，越高越好，60fps 为流畅）、长任务（超过 50ms 的任务，会导致卡

顿）、Call Stack（函数调用栈，定位耗时函数）、Layout（回流）、Paint（重绘）

使用 Chrome Lighthouse 生成性能报告

◦ 步骤：打开 DevTools → 切换到 Lighthouse → 勾选 Performance → 点击 Generate report

查看评分和优化建议

◦ 关注核心 Web 指标：

▪ LCP（最大内容绘制）：衡量首屏加载性能，目标 < 2.5s

▪ FID（首次输入延迟）：衡量交互响应性能，目标 < 100ms（已逐步被 INP 替代）

▪ CLS（累积布局偏移）：衡量页面稳定性，目标 < 0.1

▪ INP（交互到下一步绘制）：衡量交互流畅度，目标 < 200ms

手动埋点测试代码性能

◦ 使用 console.time() 测试单个函数或代码块的执行时间

Code block

1console.time('arraySort');

2	const arr = Array(100000).fill(0).map(() => Math.random());
3	arr.sort();
4	console.timeEnd('arraySort');//输出：arraySort: 12.345ms

◦ 使用 performance API 更精细地监控性能

Code block

1// 记录性能标记 2performance.mark('start');

3// 执行耗时操作 4doHeavyTask();

5performance.mark('end');

6// 计算标记之间的时间差

7	performance.measure('taskTime', 'start', 'end');
8	const measure = performance.getEntriesByName('taskTime')[0];
9	console.log('任务耗时：', measure.duration);
10	//清除性能标记
11	performance.clearMarks();
12	performance.clearMeasures();

线上阶段：自动监控（监控线上用户体验）
监控核心 Web 指标（基于 Web Vitals/Performance API）

◦ 通过 Performance API 获取 LCP、CLS 等指标，通过 EventTarget 获取 FID/INP 指

标

◦ 将监控数据上报到服务端，进行统计分析，当指标异常时（如 LCP > 4s），触发告警

监控资源加载性能

◦ 通过 performance.getEntriesByType('resource') 获取所有资源的加载时间、大

小等信息，监控慢加载资源（如加载时间 > 3s 的 JS/CSS/图片）

◦ 监听 window.onerror 和 window.unhandledrejection 捕获 JS 错误，上报错误信

◦ 通过 PerformanceObserver 监听长任务，上报长任务信息，定位线上卡顿问题

Code block

1// 监控长任务

2	const observer = new PerformanceObserver((list) => {
3	const entries = list.getEntries();
4	entries.forEach((entry) => {
5	//上报长任务数据
6	fetch('/api/report/longtask', {
7	method: 'POST',
8	body: JSON.stringify({
9	duration: entry.duration,
10	startTime: entry.startTime,
11	type: 'longtask'
12	})
13	});
14	});
15	});
16	observer.observe({ entryTypes: ['longtask'] });

集成第三方监控平台

◦ 直接集成 Sentry、New Relic 等第三方平台，无需手动开发监控逻辑，快速实现线上性能监控

和告警

15. DNS 预解析（DNS Prefetching）配置及应用

核心定义

DNS 预解析（DNS Prefetching）是指：浏览器在页面加载过程中，提前解析页面中可能需要访问的域名的 DNS 解析记录，并缓存起来。当用户后续需要访问该域名的资源时，无需再进行 DNS 解析

（或从缓存中读取），减少 DNS 解析时间，提升资源加载速度。

DNS 解析的性能瓶颈

DNS 解析是资源加载的第一步，通常需要 20-100ms（甚至更长，取决于网络环境和域名复杂度），若页面中存在多个外部域名（如 CDN 域名、接口域名），DNS 解析时间会累积，影响页面加载速度。

DNS 预解析的核心就是提前消耗少量资源，换取后续资源加载的时间节省。

配置 DNS 预解析的方法

全站分卷索引 · 7 卷