發現高分辨率時間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中文網其他相關文章！