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的浏览器中。

Answer 1

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

时间戳是：

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

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

DOMTimeStamp只有毫秒精度，但是DOMHighResTimeStamp 具有10微秒的最小精度。

注意：有些浏览器还没有实现rAF的这个方面，可能会给你错误或没有价值作为参数。

一些资源：

Answer 2

最后，我在Paul Irish的一篇文章和高分辨率时间的说明中找到了答案：

requestAnimationFrame API: now with sub-millisecond precision

High Resolution Time

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

Answer 3

MDN说：

该回调只有一个参数DOMHighResTimeStamp，该参数指示当前时间（从 performance.now（）返回的时间）

这是 performance.now（）返回的结果：

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

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

requestAnimationFrame：时间戳究竟是什么？

3 个答案: