requestAnimationFrame：时间戳到底是什么意思？

Question

我一直认为requestAnimationFrame使用的时间戳与JavaScript中通常使用的时间戳相同，即自1970年1月1日以来的毫秒数。今天我捕获了时间戳进行验证，发现RAF时间戳可能是自页面加载开始以来度量的。这些时间戳具体是从哪里开始度量的呢？

测试代码：

<p id="output"></p>

var i = 0;
var start = null;
var times = [];
var dur = 5000;

function step(timestamp) {
 if (start===null) start = timestamp;
 times[i++] = timestamp;
 if (timestamp-start<=dur) {
  requestAnimationFrame(step);
 } else {
  document.getElementById('output').innerHTML = times.join('<br>');
 }
}

requestAnimationFrame(step);

得到的结果如下：

158.52126457412882
183.12243595205535
199.52116819316421
...

适用于所有支持RAF的浏览器。

- Leos Ondra

---

从文档中可以得知：“回调函数只有一个参数，即DOMHighResTimeStamp，它表示requestAnimationFrame开始触发回调的当前时间。” - gen_Eric

Answer 1

这是一个DOMHighResTimeStamp或高分辨率时间戳（与window.performance.now()获得的相同）。

时间戳是：

requestAnimationFrame开始触发回调时的当前时间。

普通时间戳和高分辨率时间戳之间的主要区别在于：

DOMTimeStamp只有毫秒精度，而DOMHighResTimeStamp具有最小精度为十微秒。

注意：一些浏览器尚未实现rAF的此方面，可能会给您提供错误或无值的参数。

一些资源：

• requestAnimationFrame
• DOMHighResTimeStamp

- user1693593

---

在rAF的情况下，它从使用rAF开始计数。第一个时间戳可能为空。这是不正确的。在第一次调用RAF之前尝试添加alert('paused')或类似内容。警报会阻止脚本，如果您在大约5秒钟后单击它，则times数组中的第一个值约为5000... - Leos Ondra

@LeosOndra请查看更新（我有更多错误的实现方法 - 重新措辞） - user1693593

Answer 2

最后，我在Paul Irish的一篇文章和High Resolution Time规范中找到了答案：

requestAnimationFrame API：现在具有亚毫秒精度

高分辨率时间

rAF时间是“相对于文档导航的开始测量的”，即相对于PerformanceTiming接口的“navigationStart属性”。

- Leos Ondra

Answer 3

MDN说：

回调函数只有一个参数，即 DOMHighResTimeStamp，该参数表示当前时间（从 performance.now() 返回的时间）。

而这就是 performance.now() 的返回值：

返回值表示自时间起点以来经过的时间。

时间起点是一种标准时间，被认为是当前文档生命周期的开始。

- CrazyDeveloper

---

但是在Chrome和FF中，requestAnimationFrame(t => console.log(t === performance.now()))返回值为false。 - Odrin

@Odrin 因为你调用 performance.now() 和 requestAnimationFrom() 内部调用 performance.now() 之间存在时间差。因此，你的结果应该是大于 t，而不是等于 t。 - CrazyDeveloper