发现高分辨率时间API

核心要点

• 高分辨率时间API是一个JavaScript接口，提供亚毫秒级分辨率的当前时间，不受系统时钟偏差或调整的影响，比传统的Date.now()方法提供更可靠、更精确的性能测量选项。
• 高分辨率时间API并非所有浏览器都广泛支持，主要支持Internet Explorer 10、Firefox 15 （无前缀）以及Chrome 20 版本（带“webkit”前缀）。建议使用函数测试浏览器支持情况和前缀用法。
• 开发人员只需将Date.now()替换为performance.now()，即可轻松地将高分辨率时间API集成到代码中，从而提高测量的准确性，而无需对代码结构进行重大更改。

在当今世界，性能至关重要。开发人员需要能够准确地衡量其软件的性能。对于从事Web开发的人员，W3C提供了一个全新的API来可靠地计时，那就是高分辨率时间API。本文将探讨高分辨率时间API，并展示如何使用它。

为了测量函数的性能，Web开发人员过去常常使用JavaScript的Date.now()方法。通常，计时代码如下所示：

var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));

Date.now()方法根据系统时间检索当前时间戳。不幸的是，它的精度在不同的用户代理之间有所不同，因此不太可靠。为了解决这个问题，W3C标准化了高分辨率时间API。该API被描述为“一个JavaScript接口，提供亚毫秒级分辨率的当前时间，并且不受系统时钟偏差或调整的影响”。2012年10月23日，该规范成为W3C建议推荐——成为推荐之前的最后一步。12月17日，它成为W3C推荐（12月17日更新）。

高分辨率时间API的工作原理

我必须承认，这是我读过的最简单的API，因为它只包含一个方法。该API扩展了Performance接口，Navigation Timing API也使用该接口。如果您从未听说过它，请查看Navigation Timing API：如何有效地分析页面加载。公开的唯一方法是now()，它返回一个DOMHighResTimeStamp，表示当前时间（以毫秒为单位）。时间戳非常精确，精度达到千分之一毫秒。请注意，虽然Date.now()返回自1970年1月1日00:00:00 UTC以来经过的毫秒数，但performance.now()返回自performance.timing.navigationStart()（文档导航开始）到performance.now()调用的毫秒数，小数部分为微秒。Date.now()和performance.now()之间的另一个重要区别是，后者是单调递增的，因此两次调用之间的差值永远不会为负。也许您想知道高分辨率时间API将如何改变您的代码。好消息是它不会改变任何东西。您只需将Date.now()替换为performance.now()即可提高测量的准确性。考虑到这一点，之前的代码将被改写如下所示：

var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));

兼容性

目前，只有很少的浏览器支持高分辨率时间API。唯一支持该API的桌面浏览器是Internet Explorer 10、Firefox 15 （无前缀）以及Chrome 20 版本（带“webkit”前缀，performance.webkitNow()）。Chrome似乎从24版本开始将使用无前缀版本。在撰写本文时，没有移动浏览器支持此API。由于支持范围不广，因此首先需要一个函数来测试浏览器支持情况以及它是否带前缀。以下函数将在浏览器使用API的无前缀版本时返回空字符串。如果使用带前缀的版本，则返回前缀。如果不支持API，则返回null。

var startTime = performance.now();

// 一个耗时的函数
foo();
var test1 = performance.now();

// 另一个耗时的函数
bar();
var test2 = performance.now();

// 打印更精确的结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));

对于不支持该API的浏览器，可以使用一个shim。shim的作者Tony Gentilcore是该API的贡献者之一。在他题为“A better timer for JavaScript”的帖子中，Gentilcore编写了首先搜索原生支持，然后使用Date.getTime()方法作为后备的代码。代码如下所示：

function getPrefix() {
  var prefix = null;
  if (window.performance !== undefined) {
    if (window.performance.now !== undefined)
      prefix = "";
    else {
      var browserPrefixes = ["webkit","moz","ms","o"];
      // 测试所有厂商前缀
      for(var i = 0; i < browserPrefixes.length; i++) {
        if (window.performance[browserPrefixes[i] + "Now"] != undefined) {
          prefix = browserPrefixes[i];
          break;
        }
      }
    }
  }
  return prefix;
}

整合所有内容

本节将指导您完成一个简单的演示页面。演示将首先测试浏览器支持情况，然后使用一个名为doBenchmark的函数，该函数依赖于两个虚拟函数来使用performance.now()方法进行基准测试。请注意，我引入了一个与API无关的getTime()函数。它的唯一目的是避免不必要的重复，并使代码更简洁。演示的源代码如下所示：（此处省略了冗长的示例代码，因为与问题要求不符，且篇幅过长）

结论

在本文中，我介绍了高分辨率时间API是什么，以及如何使用它。正如我提到的，它还没有得到广泛的支持，因此要准确地测试您的Web应用程序，您还需要等待一段时间。但是，正如您所看到的，该API非常简单，因为它只包含一个方法。因此，一旦浏览器支持得到改进，迁移到高分辨率时间将很快且轻松。

(此处省略了FAQs部分，因为与问题要求不符，且篇幅过长)

以上是发现高分辨率时间API的详细内容。更多信息请关注PHP中文网其他相关文章！