Navigation Timing API

Navigation Timing API 提供了可用于衡量一个网站性能的数据。与用于相同目的的其他基于JavaScript的机制不同,该API可以提供可以更有用和更准确的端到端延迟数据。

 

Concepts and usage

你可以使用Navigation Timing API在客户端收集性能数据,并用XMLHttpRequest 或其它技术传送到服务端。同时,该API使你可以衡量之前难以获取的数据,如卸载前一个页面的时间,在域名解析上的时间,在执行load (en-US)事件处理器上花费的总时间等。

 

Interfaces

Performance

返回一个Performance对象。该对象由High Resolution Time API定义,Navigation Timing API 在此基础上增加了两个属性:timingnavigation

PerformanceNavigationTiming

提供了方法和属性来存取关于游览器文档navigation事件的相关数据。如文档实际加载/卸载的时间。

PerformanceTiming

曾被用来获取timing的值,用来衡量页面性能。

  PerformanceNavigation

曾被用来获取navigation的值,用来描述加载相关的操作。

 

 

以下示例显示了如何测量感知加载时间:

function onLoad() {
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

还有很多以毫秒为单位呈现的测量事件,你可以通过  PerformanceTiming 接口得到它们。按照事件发生的先后顺序,这些事件的列表如下:

  • navigationStart
  • unloadEventStart
  • unloadEventEnd
  • redirectStart
  • redirectEnd
  • fetchStart
  • domainLookupStart
  • domainLookupEnd
  • connectStart
  • connectEnd
  • secureConnectionStart
  • requestStart
  • responseStart
  • responseEnd
  • domLoading
  • domInteractive
  • domContentLoadedEventStart
  • domContentLoadedEventEnd
  • domComplete
  • loadEventStart
  • loadEventEnd

window.performance.navigation 对象存储了两个属性,它们表示触发页面加载的原因。这些原因可能是页面重定向、前进后退按钮或者普通的 URL 加载。

window.performance.navigation.type:

Constant Value Description
TYPE_NAVIGATE 0

导航开始于点击链接、或者在用户代理中输入 URL、或者表单提交、或者通过除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的脚本初始化操作。

TYPE_RELOAD 1

通过刷新操作或者 location.reload() 方法导航。

TYPE_BACK_FORWARD 2

通过历史遍历操作导航。

TYPE_UNDEFINED 255

其他非以上类型的导航。

window.performance.navigation.redirectCount 表示到达最终页面前,重定向的次数(如果有的话)。

Navigation Timing API 可以用于收集客户端性能数据,然后通过 XHR 发送给服务端。还可以计算那些其他方法难以计算的数据,如卸载( unload )上一个页面的时间、域名查找时间、window.onload 的总时间等等。

示例

计算页面加载所需的总时长:

var perfData = window.performance.timing;
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

计算请求返回时长:

var connectTime = perfData.responseEnd - perfData.requestStart;

规范

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 6.0 7 (7) 9 15.0 8
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 15 (15) 9 15.0 8