阅读 175

你以为什么是perfomance之事件/方法

简说

perfomance是浏览器提供给开发者用作监前端基础性能的标准api,通过该api的中提供的各项数据指标,前端开发者可以多快好省的定位性能损耗的各个环节。

performance对象

performance对象是挂载在window上的属性,通过使用window.performance或直接使用performance获得:

事件/方法介绍

1. onresourcetimingbufferfull,

是performance的一个事件,使用方式:performance.onresourcetimingbufferfull = callback。当resourcetimingbuffer的数量满载(即资源计时缓冲区中Performance Entry对象满载),就会触发绑定的callback。callback中的事件对象如下:

2. setResourceTimingBufferSize,

是一个用来设置资源计时缓冲区大小的方法,使用方法:performance.setResourceTimingBufferSize(num);num默认为150,建议再次设置的时候需要大于150。(ResourceTimingBuffer指的不是mark或measures,一个站点的timing指的是PerformanceNavigationTiming,而一个站点中的文件资源请求的timing叫PerformanceResourceTiming,如下)。

3. getEntries,

用来获取静态资源数组列表的方法。即获取的是PerformanceNavigationTiming、PerformanceResourceTiming、PerformancePaintTiming、PerformanceMark和PerformanceMeasure等对象。如下:

4. toJSON,

输出将performance序列化后的JSON对象,使用方式:performance.toJSON();一个包含timeOrigin、timing和navigation属性的JSON对象。如下:

5. mark

接受一个字符串参数用作name命名,在浏览器的性能缓冲区添加一个时间戳,使用方法:performance.mark(xxx);mark对象包含的属性有:name、detail、entryType、startTime、duration,其中name为xxx,entrtType为mark,startTime为生成时的时间戳,duration为0。如下:

6. measure

接受三个字符串a、b、c,a为必填,b、c为选填,a为measure的名字,b为测量开始的标记名字(需要存在该标记),c为测量结束的标记名字(需要存在该标记)。使用方式:performance.measure(xxx,start,end);measure对象包含的属性有:name、detail、entryType、startTime、duration,其中name为xxx,entrtType为measure,startTime为生成时的时间戳,duration为start(mark).startTime - end(mark).startTime。如下:

7. getEntriesByType

用于获取指定的entryType名所对应的PerformanceNavigationTiming、PerformanceResourceTiming、PerformancePaintTiming、PerformanceMark和PerformanceMeasure,分别为resource、mark、measure、navigation和paint。使用方式:performance.getEntriesByType(xxx)。

8. getEntriesByName

用于获取指定的name名所对应的PerformanceNavigationTiming、PerformanceResourceTiming、PerformancePaintTiming、PerformanceMark和PerformanceMeasure。使用方式:performance.getEntriesByName(xxx)。

9. clearMarks

接受一个字符串参数,为mark的name,然后清除该名字对应的mark;若不传参,则清除所有entryType为mark的对象。

10. clearMeasures

接受一个字符串参数,为measure的name,然后清除该名字对应的measure;若不传参,则清除所有entryType为measure的对象。

11. clearResourceTimings

接受一个字符串参数,为resource的name(是一个地址),然后清除该名字对应的resource;若不传参,则清除所有entryType为resource的对象。

12. now

返回一个相对的时间戳,精确到了微妙级别,表示从timeOrigin到执行此方法时中间间隔的时间,以一个恒定的速率慢慢增加的,它不会受到系统时间的影响,比Date.now更加精准。performance.timing.navigationStart + performance.now() 约等于 Date.now()。

写在最后

需要声明的一点是,我不是一个教授者,我只是一个分享者、一个讨论者、一个学习者,有不同的意见或新的想法,提出来,我们一起研究。分享的同时,并不只是被分享者在学习进步,分享者亦是。

知识遍地,拾到了就是你的。

既然有用,不妨点赞,让更多的人了解、学习并提升。

号外

我写了一个前端基础性能监控的包: github.com/Indifferenc…

npm包下载: npm install performance-kits --save

求星星,等拍砖,orz,咱们结个善缘~