前端性能优化之自定义性能指标及上报方法详解

最新推荐文章于 2024-08-05 10:00:09 发布

winty~~

最新推荐文章于 2024-08-05 10:00:09 发布

阅读量767

点赞数

本文链接：https://blog.csdn.net/LuckyWinty/article/details/103982306

版权

本文介绍了如何使用浏览器API进行前端性能优化，重点讲解了如何自定义性能指标，如利用Performance API获取页面加载时间、重定向信息，并通过window.performance.now()获取精确时间戳。此外，还探讨了关键性能指标的定义，如首屏图片加载时间、资源耗时等，以及利用PerformanceObserver实现资源上报的策略。文章最后列举了多个重要的前端性能指标及其统计方法。

摘要由CSDN通过智能技术生成

背景

性能优化是所有前端人的追求，在这条路上，方法多种多样。这篇文章，说一下利用浏览器的一些API，可以怎样进行自定义性能指标及上报。

PS：后面会出一篇利用chrome开发者工具进行性能分析的哦，敬请期待～

自定义性能指标介绍

自定义性能指标这里，主要要介绍的是 Performance 接口,这个接口可以获取到当前页面中与性能相关的信息。主要包含了Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

Performance类型的对象可以通过调用只读属性 window.performance 来获得,截止目前，其支持度已经很高了，支持性如下：

performance.now()

在chrome浏览器中返回的时间是以毫秒为单位的，更精确。

performance.now() 与 Date.now() 不同的是，返回了以微秒（百万分之一秒）为单位的时间，更加精准。

并且与 Date.now() 会受系统程序执行阻塞的影响不同，performance.now() 的时间是以恒定速率递增的，不受系统时间的影响（系统时间可被人为或软件调整）。

这里主要是一些需要入侵业务代码打点的时候，可以使用这个 API 来获取时间戳

注意：Date.now() 输出的是距离 1970 的毫秒数，而 performance.now() 输出的是相对于 performance.timing.navigationStart(页面初始化) 的时间。

使用 Date.now() 的差值并非绝对精确，因为计算时间时受系统限制（可能阻塞）。但使用 performance.now() 的差值，并不影响我们计算程序执行的精确时间。

window.performance.navigation

window.performance.navigation 对象提供了在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等。我们可以看看：

属性	含义
type	表示是如何导航到这个页面的
redirectCount	表示在到达这个页面之前重定向了多少次

其中，type 的取值及含义如下表：

type的值	含义
0	当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址
1	点击刷新页面按钮或者通过Location.reload()方法显示的页面
2	页面通过历史记录和前进后