事件的高分辨率时间戳

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

在 Chrome 49 之前的版本中,此 timeStamp 值表示为 DOMTimeStamp,这是自系统纪元以来的整毫秒数,与 Date.now() 返回的值很像。

从 Chrome 49 开始,timeStampDOMHighResTimeStamp 值。此值仍是毫秒数,但具有微秒分辨率,这意味着该值将包含小数部分。此外,该值不是相对于周期的,而是相对于 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