用户计时 API：了解您的 Web 应用程序

Question

高性能 Web 应用程序对于出色的用户体验至关重要。 随着 Web 应用程序变得越来越复杂，了解性能影响对于创建引人入胜的体验至关重要。 在过去的几年中，浏览器中出现了许多不同的 API，以帮助分析网络性能、加载时间等，但这些 API 不一定能提供细粒度的细节，并具有足够的灵活性来找出导致应用程序变慢的原因，输入 User Timing API ，它提供了一种机制，您可以使用它来检测您的 Web 应用程序，以确定您的应用程序在哪里花费时间。 在本文中，我们将介绍 API 以及如何使用它的示例。

你无法优化你无法衡量的东西

加速慢速 Web 应用程序的第一步是确定时间花在哪里。 测量 Javascript 代码区域的时间影响是识别热点的理想方法，这是寻找如何提高性能的第一步。 幸运的是， 用户计时 API 提供了一种方法，您可以在 Javascript 的不同部分插入 API 调用，然后提取可用于帮助您优化的详细计时数据。

高分辨率时间和 now()

精确时间测量的一个基本部分是精度。 在过去，我们有基于毫秒测量的计时，这是可以的，但是构建一个无卡顿的 60 FPS 站点意味着需要在 16 毫秒内绘制每一帧。 因此，当您只有毫秒精度时，它缺乏良好分析所需的精度。 输入 高分辨率时间 ，这是现代浏览器中内置的一种新计时类型。 高分辨率时间 为我们提供了可以精确到微秒分辨率的浮点时间戳——比以前好一千倍。

要在您的 Web 应用程序中获取当前时间，请调用 now() 方法，它形成 扩展 了 Performance 接口 以下代码显示了如何做到这一点：

var myTime = window.performance.now();

还有另一个名为 PerformanceTiming ，它提供了许多与 Web 应用程序加载方式相关的不同时间。 这 now()方法返回从 navigationStart中的时间 PerformanceTiming 发生了。

DOMHighResTimeStamp 类型

在过去尝试对 Web 应用程序计时时，您会使用类似 Date.now()它返回一个 DOMTimeStamp 。 DOMTimeStamp 返回一个整数毫秒作为它的值。 为了提供高分辨率时间所需的更高精度，引入了一种称为 DOMHighResTimeStamp 。 此类型是一个浮点值，它还以毫秒为单位返回时间。 但由于它是浮点数，该值可以表示毫秒的分数，因此可以产生千分之一毫秒的精度。

用户计时界面

所以现在我们有了高分辨率的时间戳，让我们使用 User Timing 接口来提取时间信息。

User Timing 接口提供的功能让我们可以在应用程序的不同位置调用方法，这些方法可以提供 Hansel 和 Gretel 样式的面包屑轨迹，让我们跟踪花费的时间。

使用 mark()

 mark() 方法是我们时序分析工具包中的主要工具。 什么 mark() 确实是为我们存储一个时间戳。 什么是超级有用的 mark()就是我们可以给时间戳命名，API会把名字和时间戳记为一个单元。

打电话 mark()在您的应用程序的各个地方，您可以计算出您在 Web 应用程序中达到该“标记”所花费的时间。

该规范提出了一些可能很有趣且相当不言自明的标记的建议名称，例如 mark_fully_loaded、mark_fully_visible、mark_above_the_fold 等。

例如，我们可以使用以下代码设置应用程序何时完全加载的标记：

window.performance.mark('mark_fully_loaded');

通过在我们的 Web 应用程序中设置命名标记，我们可以收集一大堆时间数据并在闲暇时对其进行分析，以确定应用程序在做什么以及何时执行。

用 计算测量值 measure()

一旦你设置了一堆时间标记，你会想要找出它们之间经过的时间。 你使用 measure() 方法来做到这一点。

measure()中任何众所周知的事件名称之间的时间 PerformanceTiming 接口

例如，您可以使用以下代码计算从 DOM 完成到应用程序状态完全加载的时间：

window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');

注意 传递众所周知的名称 domComplete 从 PerformanceTiming 接口

你打电话时 measure()它独立于您设置的标记存储结果，因此您可以稍后检索它们。 通过在应用程序运行时存储时间，应用程序保持响应，并且您可以在应用程序完成某些工作后转储所有数据，以便以后对其进行分析。

用 丢弃标记 clearMarks()

有时，能够摆脱您设置的一堆标记很有用。 例如，您可能会在 Web 应用程序上进行批量运行，因此您希望每次运行都重新开始。

通过调用 来删除您设置的任何标记很容易 clearMarks()

因此，下面的示例代码将清除您拥有的所有现有标记，以便您可以根据需要再次设置计时运行。

window.performance.clearMarks();

当然，在某些情况下您可能不想清除所有标记。 因此，如果您想删除特定标记，只需传递要删除的标记的名称即可。 例如，下面的代码：

window.peformance.clearMarks('mark_fully_loaded');

摆脱我们在第一个示例中设置的标记，同时保持我们设置的任何其他标记不变。

您可能还想摆脱您所做的任何措施，并且有一种相应的方法可以做到这一点，称为 ' clearMeasures()'。 它的工作原理与 clearMarks()确实如此，而是处理您所做的任何测量。 例如，代码：

window.performance.clearMeasures('measure_load_from_dom');

将删除我们在上面所做的措施 measure() 例子。 如果要删除所有措施，它的工作原理与 clearMarks()- 你只要调用 clearMeasures()没有论据。

取出计时数据

设置标记和测量间隔都很好，但是在某些时候你想获得那个时间数据来执行一些分析。 这也很简单，您所要做的就是使用 PerformanceTimeline 接口。

例如 getEntriesByType() 方法让我们获得所有的标记时间，或者我们所有的度量超时作为一个列表，这样我们就可以迭代它并消化数据。 好在列表按时间顺序返回，因此您可以按照标记在您的 Web 应用程序中被击中的顺序查看标记。

下面的代码：

var items = window.performance.getEntriesByType('mark');

返回我们在我们的 Web 应用程序中被击中的所有标记的列表，而代码：

var items = window.performance.getEntriesByType('measure');

返回我们已采取的所有措施的列表。

您还可以使用 特定名称 您提供 例如，代码：

var items = window.performance.getEntriesByName('mark_fully_loaded');

将返回一个列表，其中包含一个项目，其中包含“mark_fully_loaded”时间戳 startTime财产。

为 XHR 请求计时（示例）

现在我们已经对 User Timing API 有了一个不错的了解，我们可以使用它来分析我们的所有 XMLHttpRequest 在我们的 Web 应用程序中花费了多长时间。

首先我们将修改我们所有的 send() 请求发出一个设置标记的函数调用，同时用一个设置另一个标记的函数调用更改我们的成功回调，然后生成请求所用时间的度量。

所以通常我们的 XMLHttpRequest 看起来像：

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  do_something(e.responseText);
}
myReq.send();

对于我们的示例，我们将添加一个全局计数器来跟踪请求的数量，并使用它来存储每个请求的度量。 执行此操作的代码如下所示：

var reqCnt = 0;

var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
myReq.onload = function(e) {
  window.performance.mark('mark_end_xhr');
  reqCnt++;
  window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr');
  do_something(e.responseText);
}
window.performance.mark('mark_start_xhr');
myReq.send();

上面的代码为我们发送的每个 XMLHttpRequest 生成一个具有唯一名称值的度量。 我们假设请求按顺序运行 - 并行请求的代码需要更复杂一些才能处理无序返回的请求，我们将把它作为练习留给读者。

一旦 Web 应用程序完成了一堆请求，我们可以使用以下代码将它们全部转储到控制台：

var items = window.performance.getEntriesByType('measure');
for (var i = 0; i < items.length; ++i) {
  var req = items[i];
  console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');
}

结论

User Timing API 为您提供了许多出色的工具，可应用于 Web 应用程序的任何方面。 缩小应用程序中的热点可以通过在整个 Web 应用程序中散布 API 调用和对生成的时间数据进行后处理来创建一个清晰的时间花在哪里的图片来轻松实现。 但是如果你的浏览器不支持这个 API 怎么办？ 没问题，你可以 在这里 它可以很好地模拟 API，并且可以很好地与 pagestest.org 。 那你还在等什么？ 立即在您的应用程序上试用 User Timing API，您将了解如何加快它们的速度，您的用户会感谢您让他们的体验变得更好。