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

相关推荐
寻找沙漠的人26 分钟前
前端知识补充—CSS
前端·css
GISer_Jing37 分钟前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_7482455239 分钟前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v1 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据1 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
2402_857583491 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js