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

What exactly is the argument in requestAnimationFrame callback?(requestAnimationFrame回调中的参数到底是什么?)

本文介绍了requestAnimationFrame回调中的参数到底是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

只需运行此命令:

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回调中的参数到底是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:requestAnimationFrame回调中的参数到底是什么?

基础教程推荐