当前位置：文江博客知识库简体中文文档 Web API Navigation_timing_API

Navigation Timing API - Web API 接口参考编辑

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

Concepts and usage

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

Interfaces

Performance

返回一个Performance对象。该对象由High Resolution Time API定义，Navigation Timing API 在此基础上增加了两个属性：timing 和 navigation

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;

规范

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

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!