这篇翻译不完整。请帮忙从英语翻译这篇文章

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

 

Concepts and usage

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

 

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!

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

文档标签和贡献者

标签: 
此页面的贡献者: donghua, xgqfrms-GitHub, CeHOU, iamyy
最后编辑者: donghua,