浏览器性能对象Performance

性能对象

当我们访问window.performance时可以看到它返回一个Performance类型的对象,以及该对象中暴露出来的几个对象和方法。

p1.png

如图我们可以看到该对象支持一个navigation对象,即PerformanceNavigation,以及一个timing对象(即PerformanceTiming)。

这些字段可以有效在下图中体现:

p-3.png

性能定时

Timing对象由如下一些属性,所有属性都包含了当这些定时事件发生时的毫秒级快照。

p2.png

  • navigationStart:这是开始浏览(navigation)时的时间快照,或者是当浏览器卸载前一个页面,或者不用执行卸载,开始获取新内容时的时间快照。这一过程或者包含了unloadEventStart数据,或者包含了fetchStart数据。如果我们想跟踪端到端的时间情况,我们往往会启用这个值。
  • unloadEventStart:这是当浏览器开始卸载同一域内的前一页数据时的时间快照。
  • unloadEventEnd:这是当浏览器完全卸载前一个页面时的时间快照。
  • redirectStart:这是当浏览器开始执行HTTP重定向时的时间快照。
  • redirectEnd:这是当浏览器完成全部HTTP重定向操作之后的时间快照。
  • fetchStart:这是浏览器第一次检查用于存储请求资源的缓存时的时间快照。要计算缓存加载的全部时间,用domainLookupStart减去fetchStart就可以了。
  • domainLookupStart:这是当浏览器开始执行DNS查询以获得所需内容时的时间快照。
  • domainLookupEnd:这是当浏览器完成DNS查询以获得所需内容时的时间快照。要计算执行DNS查询的完整时间,用domainLookupEnd减去domainLookupStart就可以了。
  • connectStart:这是当浏览器与当前页的远端服务器开始建立TCP连接时的时间快照。
  • secureConnectionStart:当页面借助HTTPS隧道加载时,该属性捕获HTTPS通信开始时的时间快照。
  • connectEnd:这是当浏览器与当前页的远端服务器完成TCP连接时的时间快照。要计算建立TCP连接所花费的总时间,用connectEnd减去ConnectStart就可以了。
  • requestStart:这是当浏览器发送HTTP请求时的时间快照。
  • responseStart:这是当浏览器第一次对服务器的响应进行注册时的时间快照。
  • responseEnd:这是当浏览器完成接收服务器发出的响应时的时间快照。要计算完成一次HTTP往返所花费的总时间,可以用responseEnd减去connectStart。
  • domLoading:这是当文档开始加载时的时间快照。
  • domComplete:这是当文档加载完成时的时间快照。要计算页面渲染所花费的时间,只需要用domComplete减去domLoading就可以了。要计算加载页面所花费的时间,包括从第一次请求开始倒页面完全加载完成,用domComplete减去navigationStart就可以了。
  • domContentLoadedEventEnd:这是当DOMContentLoaded事件第一次执行完成时的时间快照。
  • domContentLoadedEventStart:这是当DOMContentLoaded事件第一次开始执行时的时间快照。
  • domInteractive:当文档对象的readyState属性设置为interactive时触发该事件,interactive是指用户可以与页面进行交互了。
  • loadEventEnd:当页面加载事件完成时触发该事件。
  • loadEventStart:当页面加载事件开始时触发该事件。

整合性能对象

首先保存感知时间(perceived time)、重定向时间、缓存时间、DNS查询时间、TCP连接时间、总往返时间以及页面渲染时间。

1
2
3
4
5
6
7
8
9
10
11
12
var perLogger = function () {
if (window.performance) {
var timing = performance.timing;
var _pTime = Date.now() - timing.navigationStart || 0,
_redirTime = timing.redirectEnd - timing.redirectStart || 0,
_cacheTime = timing.domainLookupStart - timing.fetchStart || 0,
_dnsTime = timing.domainLookupEnd - timing.domainLookupStart || 0,
_tcpTime = timing.connectEnd - timing.connectStart || 0,
_roundtripTime = timing.responseEnd - timing.connectStart || 0,
_renderTime = timing.domComplete - timing.domLoading || 0
}
}

性能导航

performance.navigation。导航对象只有个两个只读属性:redirectCount和type。

  • redirectCount:表示浏览器访问当前页面,执行HTTP重定向的次数。

HTTP重定向非常重要,因为它会造成每个重定向都必须完成一个完整的往返过程。执行HTTP重定向后,向Web服务器发送的原始请求会以301或302的返回码返回,同时附带有新地址的路径信息。这时,浏览器必须初始化一个新的TCP连接,然后向新地址发送一个新的请求。

  • type:
    • TYPE_NAVIGATE:值为0,表示当前页是通过点击一个链接、提交一个表单,或者直接在地址栏输入URL,跳转或定位过来的。
    • TYPE_RELOAD:值为1,表示当前页面是通过重载操作访问的。
    • TYPE_BACK_FORWARD:值为2,表示当前页是通过访问浏览器历史对象,跳转或定位过来的。
    • TYPE_RESERVED:值为255,所有上述情况之外的页面访问方式,都使用该值。

*高分辨率时间

用亚毫秒值记录时间。高分辨率时间对于获取频率低于1毫秒的定时数据非常有用。针对性能对象的获取,Web性能工作组(Web Performance Working Group)给出了一个公用函数performance.now()。

Date对象的精度仅仅能够达到1毫秒,并且Date对象的值是基于系统时间(date)的,理论上讲,它在测试过程中是可以变化的,可能会导致结果出现偏差。

performance.now()函数返回的结果是以几分之一毫秒来技术的。该函数与navigationStart事件有关联,但与系统时间无关,因此它不受系统时间改变的影响。


其他链接: