requestAnimationFrame回调中的参数到底是什么？ [英] What exactly is the argument in requestAnimationFrame callback?

问题描述

只需运行此命令：

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有关的一些开销？不然呢？在这种情况下，12ms不是我要扔掉的东西。

推荐答案

参数是DOMHighResTimeStamp，就像Performance.now应该返回的一样，即使它不是此方法返回的参数。

---

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

由于requestAnimationFrame回调计划激发下一帧(即，在上次调用后约16ms)，从此方法传递的DOMHighResTimeStamp不需要此缓解，因此您在thisDOMHighResTimeStamp中仍具有完全精度。

---

现在回答标题的问题，传入requestAnimationFrame的回调的DOMHighResTimeStamp表示该帧所有回调堆栈的调用时间。
实际上，requestAnimationFrame只将回调参数存储在堆栈中，然后在帧发生时(就在下一个绘制操作之前)调用此堆栈。
这意味着同一帧的所有回调将共享完全相同的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回调中的参数到底是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！