Web API——Performance属性了解和使用

英子的搬砖日志 2024-08-12 12:03:07 阅读 72

性能监控一直是前端的一个重点工作,本文介绍在做性能监控时,必须要了解的一个Web API——performance,主要了解它的的属性和使用。

一、<code>window.performance

1、Performance 是一个标准,用于解决开发者在浏览器中获取性能数据的问题。

2、Performance 同时也是一个浏览器全局对象,提供了一组 API 用于获取程序在某些节点的性能数据。它包含一组高精度时间定义,以及配套的相关方法。

通过performance对象可以获取到当前页面中与性能相关的信息。

在这里插入图片描述

属性值说明

<code>eventCounts:记录了所有已经分发过的 Event,处理时间是否大于 50ms。

memory: 记录内存属性

usedJSHeapSize,JS 对象(包括V8引擎内部对象)占用的内存totalJSHeapSize,可使用的内存jsHeapSizeLimit,内存大小限制

navigation:返回一个 PerformanceNavigation 对象,这个对象表示出现在当前浏览上下文的 navigation 类型,比如获取某个资源所需要的重定向次数

redirectCount:只读,表示在到达这个页面之前重定向了多少次onresourcetimingbufferfull:当浏览器的资源时间性能缓冲区已满时会触发type:表示是如何导航到这个页面的,一般用来检测页面时如何跳转过来的。

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

<code>timeOrigin:返回性能测量开始时的时间的高精度时间戳。

timing:最重要的属性,包含了网络、解析等一系列的时间数据,常用于页面性能分析。

一张图来了解timing,如下:

在这里插入图片描述

常用性能指标计算公式:

DNS查询耗时 = domainLookupEnd - domainLookupStart

TCP链接耗时 = connectEnd - connectStart

request请求耗时 = responseEnd - responseStart

解析dom树耗时 = domComplete - domInteractive

白屏时间 = domloading - fetchStart

domready时间 = domContentLoadedEventEnd - fetchStart

onload时间 = loadEventEnd - fetchStart

使用注意事项:

因为很多值必须在页面完全加载之后才能得出,建议最好在window.onload事件中读取各种数据。

使用示例:

<code>// 兼容性写法

const performance = window.performance || window.msPerformance || window.webkitPerformance;

const timing = performance && performance.timing;

const navigation = performance && performance.navigation;

// DNS 解析耗时

const dns = timing.domainLookupEnd - timing.domainLookupStart;

// TCP 链接耗时

const conn = timing.connectEnd - timing.connectStart;

// 等待服务器响应耗时(注意是否存在cache)

const request = timing.responseStart - timing.requestStart;

// 内容加载耗时(注意是否存在cache)

const response = timing.responseEnd - timing.responseStart;

// 总体网络交互耗时,即开始跳转到服务器资源下载完成

const network = timing.responseEnd - timing.navigationStart;

// 渲染处理

const processing = (timing.domComplete || timing.domLoading) - timing.domLoading;

// 抛出load事件

const load = timing.loadEventEnd - timing.loadEventStart;

// 总耗时

const total =

(timing.loadEventEnd || timing.loadEventStart || timing.domComplete || timing.domLoading) -

timing.navigationStart;

// 可交互

const active = timing.domInteractive - timing.navigationStart;

// 请求响应耗时,即T0,注意cache

const t0 = timing.responseStart - timing.navigationStart;

// 首次出现内容,即T1

const t1 = timing.domLoading - timing.navigationStart;

// 内容加载完毕,即T3

const t3 = timing.loadEventEnd - timing.navigationStart;

// 重定向次数

const redirectCount = navigation && navigation.redirectCount;

// 跳转耗时

const redirect = timing.redirectEnd - timing.redirectStart;

// APP CACHE 耗时

const appcache = Math.max(timing.domainLookupStart - timing.fetchStart, 0);

更多属性说明可参看:https://segmentfault.com/a/1190000040912772

二、performance.getEntries()

window.performance.getEntries() 返回一个数组,数组的每个元素代表对应的静态资源的信息。

数组的第一个元素结果相当于:window.performance.getEntriesByType('navigation')

window.performance.getEntries() 执行结果:

在这里插入图片描述

window.performance.getEntriesByType(‘navigation’) 执行结果:

在这里插入图片描述

发现其实是一样的!

重要属性说明:

<code>duration:资源的总耗时(包括等待时长,请求时长,响应时长 相当于responseEnd - startTime)initiatorType:初始类型(注意这个类型并不准确,例如在css中的图片资源会这个值显示css,所以还是推荐用name中的后缀名)name:资源的链接transferSize: 转换后的文件大小(略大于encodedBodySize,这个值是和chrome的devtool Network里的size一致)

PS:了解更多可点击查看 使用 Performance API 获取页面性能 、参考文章



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。