Performance API是浏览器内置的性能监控工具，通过window.performance提供高精度时间戳和页面加载、资源请求等数据。它包含Navigation Timing、Resource Timing、User Timing和Paint Timing等接口，可测量页面加载耗时、DOM渲染时间、关键渲染指标如FP和FCP，并支持自定义标记监控函数执行时间。结合PerformanceObserver和navigator.sendBeacon，能实现细粒度性能采集与上报，帮助分析白屏时间、资源阻塞等问题，支持多维度性能优化与告警。
前端性能监控是提升用户体验的关键环节，而浏览器提供的 Performance API 是实现这一目标的核心工具。它能帮助开发者精准测量页面加载、资源请求、脚本执行等关键阶段的耗时，从而定位性能瓶颈并进行针对性优化。
什么是 Performance API？
Performance API 是现代浏览器内置的一套接口，用于获取高精度的时间戳和页面性能相关数据。其核心对象是 window.performance，提供了一系列方法和属性，比如 performance.now() 可以获取毫秒级精确时间，比 Date.now() 更适合做性能测量。
更重要的是，Performance API 提供了多个子接口：
- Navigation Timing：记录页面导航和加载各阶段的时间，如 DNS 查询、TCP 连接、DOM 解析等。
- Resource Timing：监控每个资源（JS、CSS、图片等）的请求过程。
- User Timing：允许开发者自定义标记和测量区间，比如标记某个函数执行开始与结束。
- Paint Timing：获取首次渲染（FP）和首次内容绘制（FCP）等关键渲染指标。
如何使用 Performance API 监控关键指标
通过以下代码可以快速获取页面加载的核心性能数据：
立即学习“前端免费学习笔记（深入）”；
function getPerformanceMetrics() {
const perfData = performance.timing;
const loadTime = perfData.loadEventEnd - perfData.navigationStart;
const domReadyTime = perfData.domContentLoadedEventEnd - perfData.navigationStart;
console.log(页面完全加载耗时: ${loadTime}ms);
console.log(DOM ready 耗时: ${domReadyTime}ms);
// 使用 PerformanceObserver 获取更详细的条目
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === 'paint') {
console.log(${entry.name}: ${entry.startTime}ms);
}
});
});
observer.observe({ entryTypes: ['paint'] });
}
getPerformanceMetrics();
这段代码输出的内容包括：
- FP（First Paint）：页面首次像素渲染时间。
- FCP（First Contentful Paint）：首次渲染出文本、图片等内容的时间。
- 结合 Navigation Timing 数据，可分析白屏时间、资源阻塞等问题。
利用 User Timing API 标记关键逻辑
除了系统自动采集的数据，你还可以手动标记代码中重要操作的执行时间：
// 标记函数开始
performance.mark('start-heavy-task');
heavyComputation(); // 某个耗时操作
// 标记函数结束
performance.mark('end-heavy-task');
// 测量耗时
performance.measure('heavy-task-duration', 'start-heavy-task', 'end-heavy-task');
// 输出结果
const measures = performance.getEntriesByType('measure');
console.log(measures); // 打印耗时统计
这种方式非常适合监控复杂计算、组件渲染、API 请求处理等业务逻辑的性能表现。
性能数据上报与持续监控
采集到性能数据后，应定期上报到服务器进行聚合分析。例如在页面卸载前发送关键指标：
window.addEventListener('beforeunload', () => {
const fcpEntry = performance.getEntriesByName('first-contentful-paint')[0];
if (fcpEntry) {
navigator.sendBeacon('/log-performance', JSON.stringify({
fcp: fcpEntry.startTime,
url: window.location.href,
timestamp: Date.now()
}));
}
});
navigator.sendBeacon 确保数据在页面关闭时仍能可靠发送，不会被中断。
结合后端系统，你可以实现：
- 按页面、设备、地区维度分析性能分布。
- 设置性能阈值告警，及时发现异常。
- 对比版本迭代前后的性能变化。
基本上就这些。合理使用 Performance API，不仅能掌握页面真实性能状况，还能为后续优化提供数据支撑。不复杂但容易忽略。
