性能监控：Performance API使用指南-js教程-PHP中文网

性能监控：Performance API使用指南

夜晨

发布： 2025-11-21 22:19:30

原创

141人浏览过

Performance API 提供高精度性能监控，通过 performance.now()、mark/measure、navigation 和 resource 等接口，精确测量页面加载、资源请求及自定义时段性能，助力优化用户体验。

性能监控：performance api使用指南

网页性能直接影响用户体验，而准确掌握页面加载与运行时的表现，是优化的关键。Performance API 是现代浏览器提供的一套原生接口，能够帮助开发者精确测量页面性能。它不依赖第三方工具，直接从浏览器获取高精度时间戳和关键性能指标。

了解 Performance API 核心对象

Performance 接口是 Performance API 的核心，可通过全局的 window.performance 访问。它提供多种方法和属性，用于记录时间点和获取性能数据。

主要组成部分包括：

performance.now()：返回自页面开始加载以来的高精度时间（毫秒），比 Date.now() 更精确，不受系统时钟调整影响。
performance.timing：提供页面加载各阶段的时间戳（已废弃，推荐使用 Navigation Timing Level 2）。
performance.getEntries()：获取所有已记录的性能条目，如资源加载、重定向等。
performance.mark() 和 performance.measure()：用于自定义标记和测量时间段。

使用 mark 和 measure 记录自定义性能

在复杂应用中，你可能需要测量某段 JavaScript 执行时间或异步操作耗时。Performance API 提供了用户计时（User Timing）接口来实现这一点。

操作步骤如下：

用 performance.mark('start') 在关键位置打标记。
执行目标代码后，调用 performance.mark('end')。
使用 performance.measure('label', 'start', 'end') 计算两者之间的时间差。
通过 performance.getEntriesByType('measure') 查看结果。

示例：

performance.mark('fetch-start');
fetch('/api/data').then(() => {
performance.mark('fetch-end');
performance.measure('fetchDuration', 'fetch-start', 'fetch-end');
});
const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration); // 输出请求耗时

获取页面加载性能指标

Navigation Timing API 是 Performance API 的一部分，可获取页面导航和加载的详细时间。虽然 timing 属性已被弃用，但可用 performance.getEntriesByType('navigation') 替代。

SEEK.ai

AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

128

查看详情

常见关键指标包括：

loadEventEnd - fetchStart：页面总加载时间。
responseStart - requestStart：后端响应时间。
domContentLoadedEventStart - fetchStart：DOM 准备就绪耗时。

获取方式：

const navEntries = performance.getEntriesByType('navigation');
const nav = navEntries[0];
console.log('DNS 查询耗时:', nav.domainLookupEnd - nav.domainLookupStart);
console.log('TCP 建连耗时:', nav.connectEnd - nav.connectStart);
console.log('白屏时间:', nav.responseStart - nav.fetchStart);
console.log('首包时间:', nav.responseStart);

监控资源加载性能

Resource Timing API 可统计页面中每个资源（如 JS、CSS、图片）的加载表现。调用 performance.getEntriesByType('resource') 即可获取。

可用于分析：

哪些资源加载最慢。
是否存在长时间阻塞的脚本。
CORS 资源是否配置了 Timing-Allow-Origin，否则数据会受限。

示例：找出加载时间超过 100ms 的资源

const resources = performance.getEntriesByType('resource');
resources.forEach(res => {
  if (res.duration > 100) {
    console.log(`${res.name} 加载耗时: ${res.duration}ms`);
  }
});

基本上就这些。Performance API 提供了轻量、标准、高效的方式监控前端性能。合理使用 mark、measure 和各类 timing 数据，能帮你快速定位瓶颈，提升用户体验。不复杂但容易忽略细节，比如清除标记（clearMarks/clearMeasures）避免内存堆积。实际项目中可结合上报机制，将关键指标发送到服务端分析。

以上就是性能监控：Performance API使用指南的详细内容，更多请关注php中文网其它相关文章！