使用导航计时 API 从客户端发送性能指标⚡

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

人人都喜欢加载速度快的网页。事实上，谷歌专门设立了一个版块来讨论性能以及企业如何朝着更快的网络速度迈进。如果我们能够在生产环境中测量一些关键指标（例如页面加载时间），并持续监控这些指标以找出可以改进的地方，岂不是很好吗？

导航计时 API

导航计时 API是一个 JavaScript API，可用于精确测量客户端性能。这些数据随后可以传输到服务器端，从而实现对性能指标的实时监控。

该 API 提供了一种简便的方法，可以原生获取页面导航和加载事件的准确、详细的计时统计信息。诸如页面加载时间、卸载上一页所需时间、域名查询耗时等指标都可以通过此 API 进行测量。

如何使用？

此 API 有两个接口，分别是 `High Resolution PerformanceAPI` 和`High Resolution PerformanceNavigationTimingAPI`。该window.performance属性返回一个由高分辨率 APIPerformance定义的接口，以及两个附加属性：

• 计时：导航和页面加载事件的数据。
• 导航：用户如何导航到该页面。

您可以在浏览器的控制台中尝试此 API（Windows 用户请按 Chrome 浏览器Ctrl+ Shift+ 键， Mac 用户请按+ + 键）：JCMDOptionJ

> performance

你会看到一个类似这样的物体：

Date更好的对象

历史上，我们一直使用Date对象来衡量时间指标，例如：

let start = Date.now();

页面末尾：

console.log(`It took: ${Date.now() - start} ms for the page to load!`);

然而，这种方法效率很低，原因有二。首先，计时代码位于页面上，本身就需要时间，会影响性能。此外，你应该知道 JavaScript 的计时并不准确。而且，它与用户实际体验到的时间相差甚远，最糟糕的是，你无法使用Date对象来测量页面加载之前的网络延迟。

如果你考虑页面开始加载之前发生的事件，例如 DNS 解析、重定向和服务器响应时间，从技术上讲，你无法通过内联代码来测量这些，因为你的代码还没有到达。

导航计时 API 太棒了

每个属性都performance.timing显示了导航事件的时间，例如页面请求时间👉🏼requestStart或页面加载事件的时间，例如 DOM 开始加载时间👉🏼，domLoading以自 1970 年 1 月 1 日 UTC 午夜以来的毫秒数表示。

💡zero值为 0 表示事件未发生。诸如“未发生”redirectStart或“未完成”之类的事件secureConnectionStart可能根本不会发生。

有关这些事件的更多信息，您可以查看W3C 建议。

您可以从上述文档中的下图看出这些事件的顺序：

一些用例

现在让我们来看看如何使用这些有用的属性来计算一些指标。

页面总加载时间

要计算页面总加载时间，可以使用loadEventEnd以下navigationStart属性：

const perfObj = window.performance.timing;

let pageLoadTime = perfObj.loadEventEnd - perfObj.navigationStart;

页面渲染时间

要计算页面渲染的总时间，只需使用domComplete以下domLoading属性：

const perfObj = window.performance.timing;

let renderTime = perfObj.domComplete - perfObj.domLoading;

请求响应时间

要计算从请求开始到响应检索结束的时间，可以使用以下方法：

const perfObj = window.performance.timing;

let renderTime = perfObj.responseEnd - perfObj.requestStart;

网络延迟

如果您想测量网络延迟：

const perfObj = window.performance.timing;

let renderTime = perfObj.responseEnd - perfObj.fetchStart;

导航和页面加载同时进行

计算导航时间和页面加载时间的总和：

const perfObj = window.performance.timing;

let renderTime = perfObj.loadEventEnd - perfObj.navigationStart;

精确定位重定向问题

要了解重定向中存在的任何问题：

const perfObj = window.performance.timing;

let renderTime = perfObj.redirectEnd - perfObj.redirectStart;

navigation财产

用户可以通过多种方式访问​​页面。如果您想知道用户是如何访问到您的页面的，或者他们在到达该页面之前经历了多少次重定向，那么这个属性将对您有所帮助。它performance.navigation包含两个属性：

• redirectCount：文档请求被重定向的次数。
• 类型：指向此页面的导航类型。

该type属性是一个enum可以有三个值的属性：

• 0：用户的操作，例如点击链接或在浏览器地址栏中输入网址。
• 1：页面重新加载。
• 2：通过浏览器历史记录来回导航。

概括

我们了解了如何使用导航计时 API 在客户端获取性能指标，并将这些指标发送到服务器，以便实时监控用户的性能，无论他们身处何处，也无论他们是如何到达那里的。这个 API 非常强大，它帮助我更好地帮助客户找到需要重点关注的页面，从而提升性能 😍。

希望这对您有所帮助，下次再见，再见👋。