事件的高分辨率时间戳

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

在 49 之前的 Chrome 版本中,此 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