简介
performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验。
下面是小姐姐对performance相关API的学习总结,一起上车吧~
performance.timing
返回一个PerformanceTiming
对象,用来获取完整的页面加载信息。
是时候祭出这张图了:
我们会比较关注的几个时间段及其耗时的计算方法如下:
- DNS解析:
timing.domainLookupEnd - timing.domainLookupStart
- 建立连接:
timing.connectEnd - timing.connectStart
- 发送请求:
timing.responseStart - timing.requestStart
- 接收请求:
timing.responseEnd - timing.responseStart
- 解析DOM树:
timing.domInteractive - timing.domLoading
- 页面加载完成:
timing.domContentLoadedEventStart - timing.domInteractive
- DOMContentLoaded事件耗时:
timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart
- DOM加载完成:
timing.domComplete - timing.domContentLoadedEventEnd
- DOMLoad事件耗时:
timing.loadEventEnd - timing.loadEventStart
performance.now
返回一个DOMHighResTimeStamp
对象,获取从timing.navigationStart
开始到调用该方法的时间,精确到千分之五毫秒(5微秒)。
下面是该方法的使用场景之一:通过计算代码块的起始位置以及结束位置performance.now()
的差值,来获取一个比较精确的代码执行时间。
看代码:
var startTime, endTime;
startTime = window.performance.now();
doSomething();
endTime = window.performance.now();
console.log(endTime - startTime);
资源性能数据
performance
提供若干API允许我们对页面中加载的资源进行性能分析。
performance.getEntries
获取一组当前页面已经加载的资源PerformanceEntry
对象。接收一个可选的参数options进行过滤,options支持的属性有name
,entryType
,initiatorType
。
var entries = window.performance.getEntries();
返回值如下图所示:
-
name
,根据entryType
不同,该值有不同含义。entryType
为resource
时,name
表示资源的路径。 -
entryType
,取值有:resource
,mark
,measure
等,详情戳这里 -
initiatorType
,初始化该资源的资源类型:- 初始化资源是一个`Element`时,取值为节点的`localName`,通过`element.localName`获取。 - 初始化资源是一个`css`文件时,取值为`css`。 - 初始化资源是一个`XMLHttpRequest`时,取值为`xmlhttprequest`。 - 初始化资源是一个`PerformanceNavigationTiming`对象时,取值为空字符串。
-
startTime
,一个DOMHighResTimeStamp
对象,开始获取该资源的时间。 -
duration
,一个DOMHighResTimeStamp
对象,获取该资源消耗时长。
performance.getEntriesByName
根据参数name
,type
获取一组当前页面已经加载的资源数据。name
的取值对应到资源数据中的name
字段,type
取值对应到资源数据中的entryType
字段。
var entries = window.performance.getEntriesByName(name, type);
performance.getEntriesByType
根据参数type
获取一组当前页面已经加载的资源数据。type
取值对应到资源数据中的entryType
字段。
var entries = window.performance.getEntriesByType(type);
performance.setResourceTimingBufferSize
设置当前页面可缓存的最大资源数据个数,entryType
为resource
的资源数据个数。超出时,清空所有entryType
为resource
的资源数据。
window.performance.setResourceTimingBufferSize(maxSize);
performance.onresourcetimingbufferfull
entryType
为resource
的资源数量超出设置值的时候会触发该事件。
performance.clearResourceTimings
移除缓存中所有entryType
为resource
的资源数据。
自定义计时接口
performance.mark
创建一个DOMHighResTimeStamp
保存在资源缓存数据中,可通过performance.getEntries()
等相关接口获取。
entryType
为字符串mark
name
为创建时设置的值startTime
为调用mark
时的时间duration
为0,因为mark
没有时长
window.performance.mark(name)
performance.clearMarks
移除缓存中所有entryType
为mark
的资源数据。
performance.measure
计算两个mark
之间的时长,创建一个DOMHighResTimeStamp
保存在资源缓存数据中,可通过performance.getEntries()
等相关接口获取。
entryType
为字符串measure
name
为创建时设置的值startTime
为调用measure
时的时间duration
为两个mark之间的时长
window.performance.measure(name, startMark, endMark);
performance.clearMeasures
移除缓存中所有entryType
为measure
的资源数据。
performance.navigation
返回一个PerformanceNavigation
类型的只读对象:
-
type
,进入页面的方式:- `TYPE_NAVIGATENEXT(0)`,通过点击链接,书签,在浏览器地址栏输入地址,或者通过脚本跳转 - `TYPE_RELOAD(1)`,通过点击页面内的刷新按钮,或者通过`Location.reload()`方法 - `TYPE_BACK_FORWARD(2)`,通过点击页面内的前进后退按钮 - `TYPE_RESERVED(255)`,其他方式
-
redirectCount
,表示到达此页面之前经过多少次重定向。
performance.toJSON
返回一个包含performance
对象所有属性的JSON
对象。
THE END
以上就是全部内容啦,有意见或者建议欢迎积极留言哦,笔芯~