为何performance.now()与document.timeline.currentTime返回值存在差异？

相关文档说明 #

• performance.now()：

performance.now() 方法返回一个高分辨率毫秒级时间戳，代表自Performance.timeOrigin以来经过的时间。

• document.timeline.currentTime：

该时间轴表示自Performance.timeOrigin以来的毫秒时间。

• Web Animations 规范：

此外，由于默认文档时间轴的时间值与时间原点偏移为零，document.timeline.currentTime 应与 performance.now() 大致对应。

测试场景 #

执行以下代码：

console.log(performance.now(), document.timeline.currentTime)

实际运行后却得到不同的数值，原因主要有以下几点：

核心原因解析 #

• 精度与更新机制不同
  performance.now() 提供微秒级精度的时间戳（返回值是带多位小数的毫秒数，例如 1234.56789），是实时获取的高精度计时值。而 document.timeline.currentTime 是与浏览器动画帧同步更新的，它只会在浏览器每一次重绘（动画帧触发）时刷新数值，精度通常为毫秒级，部分浏览器还会对其做取整或截断处理。

• 调用时机的时间差
  即使在同一行代码中调用两个方法，JavaScript 引擎执行它们存在极短的间隔，但更关键的是：如果代码执行时机不在动画帧周期内，document.timeline.currentTime 会沿用上一次动画帧的时间快照，而 performance.now() 会实时获取当前的高精度时间，两者自然会出现偏差。

• 浏览器实现细节差异
  虽然规范要求两者对齐 Performance.timeOrigin，但不同浏览器的底层计时源可能存在细微同步延迟，或是对时间戳的处理逻辑不同（比如是否做平滑处理、是否取整），这也会导致数值出现差异。

举个直观的例子：假设当前 performance.now() 返回 1000.123，而最近一次动画帧的时间是 1000，那么 document.timeline.currentTime 就会返回 1000，两者就产生了 0.123 的差值。

内容的提问来源于stack exchange，提问作者MaximPro