你是否真的懂 H5 performance属性

629 阅读3分钟

简介

performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验。

下面是小姐姐对performance相关API的学习总结,一起上车吧~

performance.timing

返回一个PerformanceTiming对象,用来获取完整的页面加载信息。

是时候祭出这张图了:

22.png

我们会比较关注的几个时间段及其耗时的计算方法如下:

  • 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支持的属性有nameentryTypeinitiatorType

var entries = window.performance.getEntries();

返回值如下图所示:

33.jpeg

  • name,根据entryType不同,该值有不同含义。entryTyperesource时,name表示资源的路径。

  • entryType,取值有:resourcemarkmeasure等,详情戳这里

  • initiatorType,初始化该资源的资源类型:

    - 初始化资源是一个`Element`时,取值为节点的`localName`,通过`element.localName`获取。
    - 初始化资源是一个`css`文件时,取值为`css`- 初始化资源是一个`XMLHttpRequest`时,取值为`xmlhttprequest`- 初始化资源是一个`PerformanceNavigationTiming`对象时,取值为空字符串。
    
  • startTime,一个DOMHighResTimeStamp对象,开始获取该资源的时间。

  • duration,一个DOMHighResTimeStamp对象,获取该资源消耗时长。

performance.getEntriesByName

根据参数nametype获取一组当前页面已经加载的资源数据。name的取值对应到资源数据中的name字段,type取值对应到资源数据中的entryType字段。

var entries = window.performance.getEntriesByName(name, type);

performance.getEntriesByType

根据参数type获取一组当前页面已经加载的资源数据。type取值对应到资源数据中的entryType字段。

var entries = window.performance.getEntriesByType(type);

performance.setResourceTimingBufferSize

设置当前页面可缓存的最大资源数据个数,entryTyperesource的资源数据个数。超出时,清空所有entryTyperesource的资源数据。

window.performance.setResourceTimingBufferSize(maxSize);

performance.onresourcetimingbufferfull

entryTyperesource的资源数量超出设置值的时候会触发该事件。

performance.clearResourceTimings

移除缓存中所有entryTyperesource的资源数据。

自定义计时接口

performance.mark

创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。

  • entryType为字符串mark 
  • name为创建时设置的值
  • startTime为调用mark时的时间
  • duration为0,因为mark没有时长
window.performance.mark(name)

performance.clearMarks

移除缓存中所有entryTypemark的资源数据。

performance.measure
计算两个mark之间的时长,创建一个DOMHighResTimeStamp保存在资源缓存数据中,可通过performance.getEntries()等相关接口获取。

  • entryType为字符串measure 
  • name为创建时设置的值
  • startTime为调用measure时的时间
  • duration为两个mark之间的时长
window.performance.measure(name, startMark, endMark);

performance.clearMeasures

移除缓存中所有entryTypemeasure的资源数据。

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

以上就是全部内容啦,有意见或者建议欢迎积极留言哦,笔芯~

参考资料:segmentfault.com/a/119000001…