使用 Navigation Timing 测量页面加载速度

发布于 2023-05-13 11:44:13 字数 6026 浏览 71 评论 0

人们喜欢快速加载的网页。谷歌实验表明，小至一百毫秒的延迟可能会产生不利影响。但是我们如何测量网页加载速度呢？页面加载实际上是什么意思？

Navigation Timing 是一个JavaScript API，用于准确测量Web的性能。该 API 提供了一种简单的方法来获取页面导航和加载事件的准确和详细的计时统计信息（本机）。它现在可以在 Internet Explorer 9 ， Google Chrome 和 Firefox 中使用。

本文介绍 API，并演示利用它公开的计时数据的方法。

如何使用它？

通过以下属性访问 window.performance 对象：

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

Chrome 还提供了一个 perfomance.memory 提供对 JavaScript 内存使用情况数据的访问的属性。

试用 API 的最简单方法是查看 window.performance 在浏览器的 JavaScript 控制台中。

在谷歌浏览器中，从任何网页：

JavaScript 控制台 > 从 Chrome 窗口右上角的扳手菜单中选择 上按 Ctrl-Shift-J 工具（或在 Windows 和 Linux 按 Command-Option-J ，或在 Mac 上
一词输入性能提示符旁边 在窗口底部的 > ，然后按回车键。
单击性能以查看对象的属性：内存、导航和计时。
单击计时左侧的箭头以查看其属性。

您应该看到类似于以下内容的内容，它是使用此页面上的代码动态生成的：

抱歉，您的浏览器不支持此部分。

若要在 Internet Explorer 中使用 API，请确保浏览器在正确的模式下运行：

在网页上，使用 <!doctype html> 指令，以确保文档以标准模式显示。
在开发人员工具控制台中，您可能需要调整浏览器或文档模式。

JavaScript Date 的更好替代品

过去，Web 开发人员使用 JavaScript Date 对象作为计时指标。一个简单的速度测试可能会在网页的开头使用代码，如下所示：

var start = Date.now();

页面末尾的代码如下所示：

console.log("Page load took " + (Date.now() - start) + "milliseconds");

使用内联 JavaScript 以这种方式衡量性能是有限且不可靠的，原因如下：

计时代码位于页面中，因此它会影响页面的加载方式和所需的时间。（Navigation Timing API 可用于获取计时页面加载完成后，不会影响该过程。
JavaScript 时间不准确。
除非您愿意在页面中保留计时代码，否则您将无法测量用户体验的加载速度。
最糟糕的是，Date 对象不能用于测量页面开始加载之前的网络延迟。

换句话说，页面内方法无法衡量用户在打开页面时遇到的总延迟，无论他们是点击链接还是在浏览器的地址栏中输入 URL。这是因为延迟包括 DNS 解析、重定向和服务器响应等过程，这些过程发生在页面内容（和 JavaScript 计时代码）加载之前。可以使用 cookie 来测量卸载一个页面和加载下一个页面之间的时间，但前提是您托管两个页面。当用户首次访问您的网站时，使用 cookie 方法将不起作用（这可能是最重要的性能衡量标准），并且只能给出网络延迟的总数字，而不会分解数据以提供有关不同类型延迟的特定信息。

这一切意味着什么？

每个 performance.timing 属性显示导航事件（如请求页面的时间）或页面加载事件（如 DOM 开始加载的时间），以毫秒为单位，自 1970 年 1 月 1 日午夜（UTC）以来。零值表示事件（例如 secureConnectionStart 或 redirectStart）未发生。

这些事件的含义在 Microsoft 的 performance.timing 文档中进行了描述，更正式地在 W3C 建议中进行了描述。Internet Explorer 9 支持 API 草稿中描述的所有属性，除了 secureConnectionStart，此外还提供 msFirstPaint 文档显示开始时发生的事件，之后 loadEventEnd.

性能.计时事件的顺序如下图所示，来自Navigation Timing 建议：

下面是导航到此页面并加载其内容时发生的所有 performance.timing 事件的动态时间线，规范化为从零开始。

将光标悬停在每个项目上可查看确切的事件时间。

抱歉，您的浏览器不支持此部分。

请注意， loadEventEnd 在这种情况下没有发生事件，因为在呈现时间线时页面仍在加载中！

如果您想使用 loadEventEnd，请确保在加载事件结束后获取它。例如：

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}

将一切整合在一起

当事件组合使用时，来自 API 的数据真正变得栩栩如生：

网络延迟（）： responseEnd- fetchStart
从服务器接收页面后加载页面所需的时间： loadEventEnd- responseEnd
导航和页面加载的整个过程： loadEventEnd- navigationStart.

数据也可以以这种方式组合以查明特定问题，例如，通过使用 redirectEnd- redirectStart.

我是如何进入此页面的？

当然，有几种方法可以打开页面。这就是 performance.navigation 派上用场的地方。此 API 只有两个属性：

重定向计数 ：文档请求被重定向的次数
类型：指向正在加载的页面的导航。

Type 是具有以下三个值之一的枚举：

0：用户的操作，例如单击链接或在浏览器地址栏中输入 URL
1：页面重新加载
2：通过向后或向前移动历史记录进行导航

让我们检查一下您是如何到达此页面的

In the wild

与使用 Date 对象的计时测试不同，Navigation Timing API 可以以不影响页面加载的方式使用。这使得它对于测量现实世界中的页面加载延迟非常有用，这是实际用户所体验的，而不是由开发人员使用公司网络内的开发计算机进行测试。

例如， XHR 可用于在每次加载（或卸载）页面时将 performance.timing 数据传递到主机服务器。这会实时生成统计信息，但效率不高。或者，可以将定时数据记录在本地存储中，供页面子集的用户子集使用，并定期打包并归档到服务器。通过这种方式，API 提供了一种简单的方法来构建页面性能的历史数据。