Performance API 实现前端资源监控

1. Performance API 的用处

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

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

2. Performance API 常用的 API

2.1 performance.getEntries()

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

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

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

2.2 entries 的类型

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

  1. navigation:与页面导航相关的条目,通常用于分析页面加载的时间点。
  2. resource:所有通过网络请求加载的资源条目,包括 JS、CSS、图片等。
  3. mark:开发者自定义的标记,用于记录特定事件的开始或结束。
  4. measure:通过 performance.measure() 生成的条目,用于测量两个标记之间的时间间隔。
javascript 复制代码
// 获取所有资源加载的性能条目
const resourceEntries = performance.getEntriesByType('resource');
console.log(resourceEntries);
2.3 performance.mark()

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

javascript 复制代码
// 创建自定义标记
performance.mark('start-task');

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

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

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

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

javascript 复制代码
// 创建 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 应用的加载速度和用户体验。

相关推荐
Vaclee1 分钟前
JavaScript-基础语法
开发语言·javascript·ecmascript
拉不动的猪23 分钟前
前端常见数组分析
前端·javascript·面试
小吕学编程40 分钟前
ES练习册
java·前端·elasticsearch
Asthenia04121 小时前
Netty编解码器详解与实战
前端
袁煦丞1 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛2 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder3 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19703 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端