Navigation Timing API - 提供可用于衡量网站性能的数据

Navigation Timing API （导航计时 API）提供可用于衡量网站性能的数据。与历史上用于收集类似信息的基于 JavaScript 的库不同，Navigation Timing API 可以更加准确和可靠。

注意： 本文目前描述的是 Navigation Timing Level 1。Level 2 有一个规范，但这里还没有介绍。

概念和用法

您可以使用 Navigation Timing API 在客户端收集性能数据，然后您可以使用 XMLHttpRequest 或其他技术将这些数据传输到服务器。

此 API 可让您测量以前难以获取的数据，例如卸载前一页所需的时间、域名查找所需的时间、执行窗口的 load 处理程序所花费的总时间，等等。

接口

Performance

window.performance 属性返回一个 Performance 对象。虽然此接口由 High Resolution Time API 定义，但 Navigation Timing API 添加了两个属性：timing 和 navigation。

PerformanceNavigationTiming

提供方法和属性来存储和检索有关浏览器文档导航事件的指标。例如，此接口可用于确定加载或卸载文档所需的时间。

PerformanceTiming

用作 timing 值的类型，该类型的对象包含可以提供对网页性能的洞察的计时信息。

PerformanceNavigation

用于返回 navigation 值的类型，其中包含解释此 Performance 实例描述的加载操作上下文的信息。

Navigation Timing API 可用于在客户端收集性能数据并通过 XHR 发送到服务器，以及测量通过其他方式很难测量的数据，例如卸载前一页的时间、域查找时间, window.onload 总时间等。

实例

计算页面总加载时间

要计算加载页面所需的总时间，您可以使用以下代码：

const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

这里从加载事件处理程序返回的时间 (loadEventEnd) 中减去导航开始的时间 (navigationStart)。这为您提供了用户感觉到的页面加载时间。

计算请求响应时间

您可以使用如下代码计算从请求开始到获得响应完成之间经过的时间：

const connectTime = perfData.responseEnd - perfData.requestStart;

这里收到响应完成的时间 (responseEnd)，减去请求发起的时间（requestStart）。

计算页面渲染时间

作为另一个有趣的数据实例，您可以使用 Navigation Timing API 获取您无法通过其他方式轻松获取的数据，您可以获得渲染页面所花费的时间：

const renderTime = perfData.domComplete - perfData.domLoading;

这是通过从加载 DOM 及其依赖项完成的时间 (domComplete) 开始，并从中减去开始解析 DOM 的时间（domLoading）来获得的。

规范

规范
Navigation Timing

浏览器兼容性

Window.performance.timing

桌面浏览器兼容性

移动浏览器兼容性