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 应用的加载速度和用户体验。

相关推荐
慧一居士16 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead18 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js