前端性能监控是保障用户体验的重要环节，Performance API作为浏览器原生提供的性能测量接口，无需引入额外依赖就能获取页面加载、资源请求、代码执行等多维度的性能数据，是前端性能监控的常用方案。
Performance API核心组成
Performance API包含多个子接口，不同接口对应不同的性能采集场景，常用的核心接口如下：
- performance.timing：返回页面整个加载过程的各阶段时间戳，是采集首屏加载性能的核心对象。
- performance.getEntries()：返回所有性能条目，包含资源加载、导航、用户交互等不同类型的性能记录。
- performance.mark()：用于自定义打点，标记代码执行的关键节点，方便测量自定义逻辑的执行耗时。
- performance.measure()：基于自定义打点计算两个标记之间的耗时，适合测量业务逻辑的运行时长。
关键性能指标采集方法
1. 页面加载核心指标
通过performance.timing可以计算出多个核心的页面加载指标，常见的指标计算方式如下：
| 指标名称 | 指标含义 | 计算方式 |
|---|---|---|
| 首字节时间（TTFB） | 浏览器接收到服务器返回的第一个字节的时间 | responseStart - navigationStart |
| DOM解析完成时间 | HTML文档解析完成，DOM树构建完成的时间 | domComplete - navigationStart |
| 页面完全加载时间 | 页面所有资源（图片、样式、脚本等）加载完成的时间 | loadEventEnd - navigationStart |
| 白屏时间 | 页面开始显示内容前的空白时间 | domLoading - navigationStart |
对应的采集代码示例如下：
// 等待页面完全加载后采集性能数据
window.addEventListener('load', function() {
const timing = performance.timing;
// 计算首字节时间
const ttfb = timing.responseStart - timing.navigationStart;
// 计算DOM解析完成时间
const domReadyTime = timing.domComplete - timing.navigationStart;
// 计算页面完全加载时间
const fullLoadTime = timing.loadEventEnd - timing.navigationStart;
// 计算白屏时间
const whiteScreenTime = timing.domLoading - timing.navigationStart;
const performanceData = {
ttfb: ttfb,
domReadyTime: domReadyTime,
fullLoadTime: fullLoadTime,
whiteScreenTime: whiteScreenTime
};
console.log('页面加载性能指标:', performanceData);
});
2. 资源加载性能采集
通过performance.getEntriesByType('resource')可以获取所有静态资源的加载性能数据，方便排查资源加载慢的问题：
// 获取所有资源加载性能条目
const resourceEntries = performance.getEntriesByType('resource');
const resourcePerformanceList = [];
resourceEntries.forEach(entry => {
resourcePerformanceList.push({
name: entry.name, // 资源地址
initiatorType: entry.initiatorType, // 资源类型，如script、link、img等
duration: entry.duration, // 资源加载总耗时
startTime: entry.startTime // 资源开始加载的时间
});
});
console.log('资源加载性能列表:', resourcePerformanceList);
3. 自定义业务逻辑耗时采集
如果我们需要测量某个业务逻辑的执行耗时，可以使用performance.mark()和performance.measure()实现自定义打点采集：
// 标记业务逻辑开始节点
performance.mark('businessStart');
// 模拟业务逻辑执行
setTimeout(() => {
// 标记业务逻辑结束节点
performance.mark('businessEnd');
// 计算两个标记之间的耗时
performance.measure('businessMeasure', 'businessStart', 'businessEnd');
// 获取自定义测量的结果
const measureEntries = performance.getEntriesByName('businessMeasure');
if (measureEntries.length > 0) {
console.log('业务逻辑执行耗时:', measureEntries[0].duration);
}
// 清除自定义标记和测量数据，避免内存占用
performance.clearMarks('businessStart');
performance.clearMarks('businessEnd');
performance.clearMeasures('businessMeasure');
}, 1000);
性能数据上报与注意事项
采集到性能数据后，通常需要在页面加载完成后异步上报到监控服务端，上报时需要注意以下几点：
- 上报时机选择：尽量在页面空闲时上报，避免阻塞页面主线程，可以使用
requestIdleCallback或者setTimeout延迟上报。 - 数据采样：如果页面访问量较大，不需要全量上报所有用户的性能数据，可以设置一定的采样比例，降低服务端压力。
- 兼容性处理：部分旧版本浏览器可能不支持Performance API的全部特性，上报前可以先做特性检测，避免代码报错。
- 隐私合规：采集的性能数据不要包含用户隐私信息，比如不要在资源地址中携带用户身份相关的参数。
上报数据的参考示例如下：
// 上报性能数据到服务端
function reportPerformanceData(data) {
// 特性检测，确保Performance API存在
if (!window.performance) {
return;
}
// 使用navigator.sendBeacon异步上报，不会影响页面卸载
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
navigator.sendBeacon('https://ipipp.com/performance/report', blob);
}
// 在页面加载完成后上报数据
window.addEventListener('load', function() {
setTimeout(() => {
const timing = performance.timing;
const reportData = {
ttfb: timing.responseStart - timing.navigationStart,
fullLoadTime: timing.loadEventEnd - timing.navigationStart,
userAgent: navigator.userAgent
};
reportPerformanceData(reportData);
}, 0);
});
Performance_API前端性能监控performance_timing页面加载性能性能指标采集修改时间：2026-06-29 04:57:33