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：

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;

规范

• https://w3c.github.io/navigation-timing/

浏览器兼容性