HTML5 Performance

简介

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

---

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