前端性能监控API-performance

249 阅读5分钟

前端监控包括性能、错误、轨迹、热点等,之前用过的也就百度统计hmjs,其它知道的也就badjs、fundebugjs、frontjs等。估计很多大公司都有自己编写的库。

今天学习一下前端性能监控的API-performance。随便打开一个网页,然后控制台打印一下这个performance,

memory:内存使用情况,是 Chrome 添加的一个非标准扩展,这个属性提供了一个可以获取到基本内存使用情况的对象。不应该使用这个非标准的 API:

totalJSHeapSize:可用的js内存大小,单位字节B

usedJSHeapSize:已经使用的内存大小,单位是字节B

jsHeapSizeLimit:内存大小限制,单位是字节B

navigation:在指定的时间段里发生的操作相关信息,包括页面是加载还是刷新、发生了多少次重定向等等。

type:如何导航到该页面,0通过链接点击,1刷新或者reload,2通过历史记录或者前进后退,255其它方式。

redirectCount:页面到达这个页面之前重定向了几次。

timeOrigin:是一个实验中的功能,兼容性不好,返回性能测量开始时的时间的高精度时间戳。

resourcetimingbufferfull:一个回调的 EventTarget,当触发 resourcetimingbufferfull 事件的时候会被调用。并不知道是做什么用的。

performance也有很多方法,什么clearMeasures、getEntries等,有十来个方法,我不理解这些方法的作用,就不解释了。

重点来了,timing这个字段,这个字段有页面相关的性能信息。

navigationStart:从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档,这个值会和fetchStart相同。我试了几个打开方式,发现都不能和fetchStart相等。

unloadEventEnd:表示unload事件处理完成时的时间戳。如果没有上一个文档,这个值会返回0。

redirectStart :表示第一个HTTP重定向开始时的时间戳。如果没有重定向,或者重定向中的一个不同源,这个值会返回0。

redirectEnd :表示最后一个HTTP重定向完成时(也就是说是HTTP响应的最后一个比特直接被收到的时间)的时间戳。如果没有重定向,或者重定向中的一个不同源,这个值会返回0。

fetchStart :表示浏览器准备好使用HTTP请求来获取文档的时间戳。这个时间点会在检查任何应用缓存之前。

domainLookupStart :表示域名查询开始的时间戳。如果使用了持续连接或者这个信息存储到了缓存或者本地资源上,这个值将和 fetchStart一致。

domainLookupEnd :表示域名查询结束的时间戳。如果使用了持续连接,或者这个信息存储到了缓存或者本地资源上,这个值和 fetchStart一致。

connectStart :表示返回HTTP请求开始向服务器发送时的毫秒时间戳。如果使用持久连接,则返回值等同于fetchStart属性的值。

connectEnd :表示返回浏览器与服务器之间的连接建立时的毫秒时间戳。如果建立的是持久连接,则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

secureConnectionStart :表示返回浏览器与服务器开始安全链接的握手时的毫秒时间戳。如果当前网页不要求安全连接,则返回0。

requestStart :表示返回浏览器向服务器发出HTTP请求时(或开始读取本地缓存时)的毫秒时间戳。

responseStart :表示返回浏览器从服务器收到(或从本地缓存读取)第一个字节时的毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开,该属性将会被数制成新的请求的相对应的发起时间。

responseEnd :表示返回浏览器从服务器收到(或从本地缓存读取,或从本地资源读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的毫秒时间戳。

domLoading :表示返回当前网页DOM结构开始解析时的毫秒时间戳。

domInteractive :表示返回当前网页DOM结构结束解析、开始加载内嵌资源时的毫秒时间戳。

domContentLoadedEventStart :表示返回当解析器发送DOMContentLoaded 事件,即所有需要被执行的脚本已经被解析时的毫秒时间戳。

domContentLoadedEventEnd :表示返回当所有需要立即执行的脚本已经被执行(不论执行顺序)时的毫秒时间戳。

domComplete :表示返回当前文档解析完成被触发时的毫秒时间戳。

loadEventStart :表示返回该文档下,load事件被发送时的毫秒时间戳。如果这个事件还未被发送,它的值将会是0。

loadEventEnd :表示返回当load事件结束,即加载事件完成时的毫秒时间戳。如果这个事件还未被发送,或者尚未完成,它的值将会是0。

从网上盗了一张图,看的更容易理解:

这么多字段,就可以得到很多时间,比如:

DNS解析时间:domainLookupEnd - domainLookupStartTCP建立连接时间:connectEnd - connectStart白屏时间:responseStart - navigationStart

通过这个API,前端性能监控就变的简单了,具体要这么封装这么编写,也是不能那么简单就直接计算,而且受网络等外部因素,精确度也是个问题。