Navigation Timing API

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

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

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

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;

规范

浏览器兼容性

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

文档标签和贡献者

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