前端性能监控：使用Performance API_js性能优化-js教程-PHP中文网

前端性能监控：使用Performance API_js性能优化

幻影之瞳

发布： 2025-11-05 10:11:02

原创

869人浏览过

Performance API是浏览器内置的性能监控工具，通过window.performance提供高精度时间戳和页面加载、资源请求等数据。它包含Navigation Timing、Resource Timing、User Timing和Paint Timing等接口，可测量页面加载耗时、DOM渲染时间、关键渲染指标如FP和FCP，并支持自定义标记监控函数执行时间。结合PerformanceObserver和navigator.sendBeacon，能实现细粒度性能采集与上报，帮助分析白屏时间、资源阻塞等问题，支持多维度性能优化与告警。

前端性能监控：使用performance api_js性能优化

前端性能监控是提升用户体验的关键环节，而浏览器提供的 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;
<p>console.log(<code>页面完全加载耗时: ${loadTime}ms</code>);
console.log(<code>DOM ready 耗时: ${domReadyTime}ms</code>);</p><p>// 使用 PerformanceObserver 获取更详细的条目
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.entryType === 'paint') {
console.log(<code>${entry.name}: ${entry.startTime}ms</code>);
}
});
});</p><p>observer.observe({ entryTypes: ['paint'] });
}</p><p>getPerformanceMetrics();</p>

登录后复制

这段代码输出的内容包括：

FP（First Paint）：页面首次像素渲染时间。
FCP（First Contentful Paint）：首次渲染出文本、图片等内容的时间。
结合 Navigation Timing 数据，可分析白屏时间、资源阻塞等问题。

利用 User Timing API 标记关键逻辑

除了系统自动采集的数据，你还可以手动标记代码中重要操作的执行时间：

超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

查看详情

// 标记函数开始
performance.mark('start-heavy-task');
<p>heavyComputation(); // 某个耗时操作</p><p>// 标记函数结束
performance.mark('end-heavy-task');</p><p>// 测量耗时
performance.measure('heavy-task-duration', 'start-heavy-task', 'end-heavy-task');</p><p>// 输出结果
const measures = performance.getEntriesByType('measure');
console.log(measures); // 打印耗时统计</p>

登录后复制

这种方式非常适合监控复杂计算、组件渲染、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 确保数据在页面关闭时仍能可靠发送，不会被中断。

结合后端系统，你可以实现：