We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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;

规范

浏览器兼容性

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

文档标签和贡献者

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