requestAnimationFrame 回调中的参数到底是什么？

Question

就运行这个：

function requestAndDraw() {
  requestAnimationFrame((t) => {
    console.log(`T: ${t} P.now:${performance.now()}`);
  });
}

intId = setInterval(requestAndDraw, 20);
setTimeout(() => clearInterval(intId), 1000);

它打印出如下内容：

T: 1164.656 P.now:1176.300000000083

请问12ms的差异是什么原因？执行其他注册到 requestAnimationFrame 的回调需要一些时间？这只是与解释 js 相关的一些开销？或者是什么？在这种情况下，我不会放弃 12 毫秒。

Answer 1

参数是 DOMHighResTimeStamp, just like what Performance.now 应该 return，即使它不是用此方法 return 编辑的那个。

所以首先让我们解释一下您所看到的精度差异：最近在大多数 CPU 中发现了一个主要的安全问题，其名称为 Meltdown and Spectre。
这些攻击可以从 Web 浏览器进行，但需要 DOMHighResTimeStamp return 由 Performance.now 编辑。 Firefox 发现的快速修复/"mitigation" 是降低此 DOMHighResTimeStamp 的分辨率。 (see more).

由于 requestAnimationFrame 回调计划触发下一帧（即上次调用后约 16 毫秒），从此方法传递的 DOMHighResTimeStamp 不需要此 缓解措施，因此您在 this DOMHighResTimeStamp.

中仍然具有完整的精度

现在回答题主的问题，requestAnimationFrame的callbacks中传入的DOMHighResTimeStamp代表了本帧所有callbacks栈的调用时间
事实上，requestAnimationFrame 仅将回调参数存储在一个堆栈中，然后在帧出现时调用此堆栈（就在下一个 painting 操作之前） .
这意味着同一帧的所有回调将共享完全相同的 DOMHighResTimeStamp，而不管前一个回调花费了多长时间。

function long(time){
  var now = performance.now();
  console.log('long');
  console.log({
    'rAF time': time,
    'Performance time': now,
    'diff': (now - time) + 'ms'
  });
  console.log('________________________');
  // wait 50ms
  while(performance.now() - time < 50) {
  }
}
function short(time) {
  var now = performance.now();
  console.log('short');
  console.log({
    'rAF time': time,
    'Performance time': now,
    'diff': (now - time) + 'ms'
  });
}
// our two functions will be stacked together to fire in the same frame
requestAnimationFrame(long);
requestAnimationFrame(short);

requestAnimationFrame 回调中的参数到底是什么？

What exactly is the argument in requestAnimationFrame callback?

javascript

canvas

html5-canvas

requestanimationframe