前端性能监控：使用Performance API_js性能优化_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-05

浏览次数：次

返回列表

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

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

前端性能监控是提升用户体验的关键环节，而浏览器提供的 Performance API 是实现这一目标的核心工具。它能帮助开发者精准测量页面加载、资源请求、脚本执行等关键阶段的耗时，从而定位性能瓶颈并进行针对性优化。

什么是 Performance API？

Performance API 是现代浏览器内置的一套接口，用于获取高精度的时间戳和页面性能相关数据。其核心对象是 window.performance，提供了一系列方法和属性，比如 performance.now() 可以获取毫秒级精确时间，比 Date.now() 更适合做性能测量。

更重要的是，Performance API 提供了多个子接口：

N*igation 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.n*igationStart;
  const domReadyTime = perfData.domContentLoadedEventEnd - perfData.n*igationStart;
<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）：首次渲染出文本、图片等内容的时间。
结合 N*igation Timing 数据，可分析白屏时间、资源阻塞等问题。

利用 User Timing API 标记关键逻辑

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

萤火商城

萤火商城V2.0，是2025年全新推出的一款轻量级、高性能、前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP，前后端源码完全开源，看见及所得，完美支持二次开发，可学习可商用，让您快速搭建个性化独立商城。萤火商城V2.0开源版 [uni-app端]如何使用uni-app端一、导入uniapp项目 1. 首先下载HBuilderX并安装，地址：https://www.dcloud

0 查看详情萤火商城

// 标记函数开始
performance.mark('start-he*y-task');
<p>he*yComputation(); // 某个耗时操作</p><p>// 标记函数结束
performance.mark('end-he*y-task');</p><p>// 测量耗时
performance.measure('he*y-task-duration', 'start-he*y-task', 'end-he*y-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) {
    n*igator.sendBeacon('/log-performance', JSON.stringify({
      fcp: fcpEntry.startTime,
      url: window.location.href,
      timestamp: Date.now()
    }));
  }
});