使用 Performance API 实现前端资源监控

2024-09-13 08:44 由 chester·chen 发表于 #前端开发

1. Performance API 的用处

Performance API 是浏览器中内置的一组工具，用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括：

监控页面资源加载：跟踪页面中的资源（如 CSS、JavaScript、图片）的加载时间。
分析页面加载时间：从导航到页面完全渲染的所有时间点。
衡量用户交互性能：测量用户点击、输入等操作的响应时间。
优化性能瓶颈：通过标记特定的代码片段和事件，精准定位性能瓶颈。

这些数据帮助开发者更好地理解页面表现，进而对性能进行优化和改进。

2. Performance API 常用的 API

在使用 Performance API 时，以下几个 API 是开发者最常用的工具：getEntries()、mark()、以及 PerformanceObserver。这些 API 提供了从获取性能数据到观察性能事件的全面能力。

2.1 performance.getEntries()

performance.getEntries() 是 Performance API 提供的一个方法，它返回所有的性能条目（entries）。这些条目记录了从页面加载到当前时刻，各类资源的加载和交互的性能数据。性能条目包括页面加载资源（如 CSS、JS、图片等）以及自定义的事件标记。

// 获取页面中所有资源的性能条目
const entries = performance.getEntries();
console.log(entries);

通过 getEntries()，你可以获取资源加载时间、开始时间、结束时间等详细信息。这对于了解页面中每个资源的加载耗时十分有帮助。

2.2 entries 的类型

getEntries() 返回的每个性能条目对象都属于以下几种类型，开发者可以根据需要筛选和分析不同类型的数据：

navigation：与页面导航相关的条目，通常用于分析页面加载的时间点。
resource：所有通过网络请求加载的资源条目，包括 JS、CSS、图片等。
mark：开发者自定义的标记，用于记录特定事件的开始或结束。
measure：通过 performance.measure() 生成的条目，用于测量两个标记之间的时间间隔。

例如，使用 performance.getEntriesByType('resource') 可以只获取资源加载的性能数据：

// 获取所有资源加载的性能条目
const resourceEntries = performance.getEntriesByType('resource');
console.log(resourceEntries);

通过这种方式，开发者可以轻松获取页面资源的加载时间及其详情。

2.3 performance.mark()

performance.mark() 是 Performance API 提供的一个方法，允许开发者在代码中手动创建标记。这些标记可以用于记录特定事件的发生时间，从而在分析性能时，更加精确地掌握代码中某个关键操作的时机。

// 创建自定义标记
performance.mark('start-task');

// 执行某个任务
doSomething();

// 创建结束标记
performance.mark('end-task');

// 测量开始和结束之间的时间
performance.measure('Task Duration', 'start-task', 'end-task');

mark() 非常适合用于衡量应用程序中某段代码的执行时间，与 measure() 一起使用可以提供更加详细的性能分析。

2.4 PerformanceObserver

PerformanceObserver 是 Performance API 的一个高级特性，它可以监听性能事件的发生，并在事件触发时执行回调。这种观察模式可以帮助开发者实时监控页面中的资源加载、导航和其他性能相关的事件。

// 创建 PerformanceObserver 实例，监听资源加载的事件
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });
});

// 监听资源类型的性能条目
observer.observe({ entryTypes: ['resource'] });

通过 PerformanceObserver，你可以监听特定类型的性能条目，如 resource 或 mark，并实时分析其数据。对于监控资源加载、关键操作或用户交互时的性能表现非常有用。

总结

Performance API 是前端开发者进行性能监控的强大工具，它提供了对页面加载、资源加载以及用户交互的详细分析能力。常用的 API，如 getEntries()、mark()、以及 PerformanceObserver，可以帮助开发者实时获取和分析性能数据。

通过合理地使用 Performance API，你可以更好地了解页面中各类操作的性能表现，从而有效地优化 Web 应用的加载速度和用户体验。