事件的高解析度時間戳記

傑夫波斯尼克
Jeff Posnick

Event 介面的 timeStamp 屬性會指出特定事件發生的時間。

在 Chrome 49 之前的版本中,這個 timeStamp 值會以 DOMTimeStamp 表示,自系統週期以來,這個單位的毫秒數也很類似 Date.now() 傳回的值。

從 Chrome 49 開始,timeStampDOMHighResTimeStamp 值。這個值仍是毫秒數,但採用微秒解析度,這個值會包含小數元件。此外,這個值不會是相對於週期的值,而是與 PerformanceTiming.navigationStart 相對,也就是使用者前往頁面的時間。

您可以藉由以下示例,瞭解提高時間戳記準確度的好處:

跨瀏覽器和舊版註意事項

如果現有程式碼可用來比較兩個事件的 Event.timeStamp 值,就不需要根據轉移至 DOMHighResTimeStamp 調整程式碼。此外,在支援 DOMHighResTimeStamp 的瀏覽器中,現有程式碼可提高微秒準確率,而且無論網頁執行期間的系統時鐘是否變更,DOMHighResTimeStamp 保證能夠單調提高單調性

如果不想比較兩個 Event.timeStamp 值,您的程式碼需要判斷事件發生的間隔時間,就可以直接與 performance.now() 比較新的 DOMHighResTimeStamp 值。此外,如果您需要將 Event.timeStamp 轉換為自系統週期後的絕對毫秒數,可以將 DOMHighResTimeStamp 新增至 performance.timing.navigationStart,以取得該值。

在這兩種情況下,DOMTimeStampDOMHighResTimeStamp 的行為不同,但您可以使用這個由 Majid Valipour 提供的轉換函式簡化跨瀏覽器程式碼。它會將 Event 物件做為參數,並傳回類似 DOMHighResTimeStamp 的值,以便與 performance.now() 進行比較,或新增至 performance.timing.navigationStart