事件的高分辨率时间戳

杰夫·波斯尼克
Jeff Posnick

Event 接口的 timeStamp 属性指示给定事件发生的时间。

在 Chrome 49 之前的版本中,此 timeStamp 值表示为 DOMTimeStamp,这是自系统周期起经过的整毫秒数,与 Date.now() 返回的值非常相似。

从 Chrome 49 开始,timeStamp 是一个 DOMHighResTimeStamp 值。此值仍是毫秒数,但具有微秒分辨率,这意味着该值将包含小数部分。此外,该值并非相对于纪元,而是相对于 PerformanceTiming.navigationStart,即用户导航到页面的时间。

下面的示例展示了更高的时间戳准确性:

跨浏览器和旧版注意事项

如果您有用于比较两个事件的 Event.timeStamp 值的现有代码,则不必在考虑转换为 DOMHighResTimeStamp 的情况下调整代码。此外,在支持 DOMHighResTimeStamp 的浏览器上,现有代码将受益于更高的微秒精度,以及 DOMHighResTimeStamp 单调递增这一事实(无论系统时钟在网页执行过程中是否发生变化)。

如果您的代码需要确定事件发生的时间,而不是比较两个 Event.timeStamp 值,可以将新的 DOMHighResTimeStamp 值直接与 performance.now() 进行比较。如果您需要将 Event.timeStamp 转换为自系统纪元起经过的绝对毫秒数,可以通过向 performance.timing.navigationStart 添加 DOMHighResTimeStamp 来获取该值。

在这两种情况下,DOMTimeStampDOMHighResTimeStamp 的行为有所不同,但您可以使用由 Majid Valipour 提供的转换函数来简化跨浏览器代码。它接受 Event 对象作为参数,并返回类似于 DOMHighResTimeStamp 的值,随时可与 performance.now() 进行比较或添加到 performance.timing.navigationStart