首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

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

编程知识
2024年09月13日 07:44

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,你可以监听特定类型的性能条目,如 resourcemark,并实时分析其数据。对于监控资源加载、关键操作或用户交互时的性能表现非常有用。

总结

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

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

From:https://www.cnblogs.com/chenyishi/p/18411037
本文地址: http://www.shuzixingkong.net/article/1968
0评论
提交 加载更多评论
其他文章 Entity Framework Plus: 让 EF Core 开发如虎添翼
EF Core介绍 Entity Framework (EF) Core 是轻量化、可扩展、开源和跨平台版的常用 Entity Framework 数据访问技术,EF Core 是适用于 .NET 的现代对象数据库映射器。它支持 LINQ 查询、更改跟踪、更新和架构迁移。EF Core 通过提供程序
Entity Framework Plus: 让 EF Core 开发如虎添翼 Entity Framework Plus: 让 EF Core 开发如虎添翼
Redis入门 - C#|.NET Core封装Nuget包
分享封装Redis C#库并打包成Nuget包的方法,旨在增强代码可测试性、解耦及扩展Redis功能。通过封装Redis客户端库,提供统一接口,便于测试、替换和扩展功能,同时支持依赖注入,简化配置和使用。
Redis入门 - C#|.NET Core封装Nuget包 Redis入门 - C#|.NET Core封装Nuget包 Redis入门 - C#|.NET Core封装Nuget包
项目完成小结:使用DjangoStarter v3和Taro开发的微信小程序
前言 不知不觉已经九月了,又到了一年的开学季,我每年都想做的项目墙甚至连个影子都没有…😂 最近生活中的琐事太多了,导致完全没有想写文章的动力,不过再怎么拖还是得记录,随便写写吧~ 这次是7月份的一个小项目,谈不上什么技术含量,算是友情开发了。后端 DjangoStarter v3,前
vue3项目部署到Github
此教程适应于以webpack,vue-cli,vite等脚手架构建的vue项目。当然,vue2和vue3都是可以滴。 1. 前提:你的代码库已经提交到Github上 如果没有的话,请到GitHub上新建仓库,并把你本地的项目提交到GitHub上新建的仓库里。 具体方法,可以参考我的博客 Git使用记
vue3项目部署到Github vue3项目部署到Github vue3项目部署到Github
manim边学边做--通用多边形
manim提供了通用多边形模块,可以绘制任意的多边形。 通用多边形模块有两种,Polygon和Polygram。 Polygon是一个几何学术语,主要指的是由三条或三条以上的线段首尾顺次连接所组成的平面图形, 而Polygram的含义更加广泛一些,它除了可以绘制传统的多边形,还能绘制非闭合的多边形,
manim边学边做--通用多边形 manim边学边做--通用多边形 manim边学边做--通用多边形
C++17新特性探索:拥抱std::optional,让代码更优雅、更安全
std::optional 背景 在编程时,我们经常会遇到可能会返回/传递/使用一个确定类型对象的场景。也就是说,这个对象可能有一个确定类型的值也可能没有任何值。因此,我们需要一种方法来模拟类似指针的语义:指针可以通过 nullptr来表示没有值。解决方法是定义该对象的同时再定义一个附加的 bool
C++17新特性探索:拥抱std::optional,让代码更优雅、更安全
Go runtime 调度器精讲(三):main goroutine 创建
原创文章,欢迎转载,转载请注明出处,谢谢。 0. 前言 回顾下 上一讲 的内容。主线程 m0 蓄势待发,准备干活。g0 为 m0 提供了执行环境,P 和 m0 绑定,为 m0 提供活,也就是 goroutine。那么问题来了,活呢?哪里有活给 m0 干? 这一讲我们将介绍 m0 执行的第一个活,也就
Go runtime 调度器精讲(三):main goroutine 创建
终于有人把Modbus讲明白了
大家好!我是付工。 2012年开始接触Modbus协议,至今已经有10多年了,从开始的懵懂,到后来的顿悟,再到现在的开悟,它始终岿然不动,变化的是我对它的认知和理解。 今天跟大家聊聊关于Modbus协议的那些事。 发展历史 Modbus于1979年诞生,已经历经了40多年。 Modbus诞生在一个特
终于有人把Modbus讲明白了 终于有人把Modbus讲明白了 终于有人把Modbus讲明白了