使用Performance API进行前端性能监控

Performance API可精准采集FP、FCP、LCP、FID、TTFB等核心性能指标，通过performance.timing、getEntries()及PerformanceObserver获取页面加载与交互数据，结合mark打点和measure测量自定义逻辑耗时，利用sendBeacon上报关键数据，实现轻量高效的前端性能监控。

前端性能直接影响用户体验，尤其在复杂应用中，页面加载慢或交互卡顿会显著降低用户留存。利用浏览器原生的 Performance API，我们可以精准采集关键性能指标，实现轻量高效的性能监控。

什么是 Performance API

Performance API 是浏览器提供的用于测量网页性能的一组接口，属于 W3C High Resolution Time 标准的一部分。它提供高精度的时间戳（纳秒级），并记录页面生命周期中的关键节点。

核心对象是 window.performance，其中最常用的是 performance.timing 和 performance.getEntries()，以及更现代的 PerformanceObserver。

采集关键性能指标

通过 Performance API 可获取多个重要时间点，进而计算出反映用户体验的核心指标：

• FP (First Paint)：页面首次绘制像素的时间，表示开始渲染内容。
• FCP (First Contentful Paint)：首次渲染文本、图片等有意义内容的时间。
• LCP (Largest Contentful Paint)：最大内容元素渲染完成的时间，衡量加载体验。
• FID (First Input Delay)：用户首次交互到响应的时间，反映页面响应性。
• TTFB (Time to First Byte)：从请求开始到收到第一个字节的时间。

例如，获取 FCP 时间：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', entry.startTime);
    }
  }
});
observer.observe({ entryTypes: ['paint'] });

监控资源加载与自定义标记

除了页面整体性能，还可以监控脚本、样式、图片等资源的加载情况：

YIXUNCMS中秋专版2.0.4

系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应

0 查看详情 performance.getEntriesByType('resource').forEach(res => {
  console.log(`${res.name}: 加载耗时 ${res.duration}ms`);
});

对于异步操作或特定业务逻辑，可使用 performance.mark() 手动打点：

performance.mark('start-api-call');
fetch('/api/data').then(() => {
  performance.mark('end-api-call');
  performance.measure('api-duration', 'start-api-call', 'end-api-call');
});

之后通过 performance.getEntriesByType('measure') 获取测量结果。

上报性能数据

采集到的数据可通过 n*igator.sendBeacon() 在页面卸载前发送给服务端，确保数据不丢失：

function sendPerformanceData() {
  const data = JSON.stringify(performance.getEntries());
  n*igator.sendBeacon('/log', data);
}
window.addEventListener('beforeunload', sendPerformanceData);

建议只上报关键指标，避免传输大量原始数据。可在上报前聚合处理，提取 FP、FCP、LCP 等核心值。

基本上就这些。Performance API 轻量、标准、无需额外依赖，结合合理的打点和上报策略，能有效帮助团队持续优化前端性能。

以上就是使用Performance API进行前端性能监控的详细内容，更多请关注其它相关文章！