在谷歌浏览器或其他浏览器中，requestAnimationFrame() 能否推到更高的重绘频率？ 版本 2：版本 3：

问题描述

这是一个关于 requestAnimationFrame() 的高级问题。

我认为the proper use of as on MDN如下：

也就是说，它类似于一个 setTimeout()，比如说，当屏幕将被重新绘制时，告诉我以便我可以做一些类似于“当你要给出最终考试，让我知道这样我就可以学习了，我不想在那之前学习浪费我的时间。

所以代码是：

const elDisplay = document.querySelector("#display");

const startTime = Date.now();

let runCount = 0;

function updateData(timestamp) {
  runCount++;
  elDisplay.textContent = `${Date.now()}\n${timestamp}\n${(Date.now() - startTime) / 1000}\n${timestamp / 1000}\n${runCount}\n${runCount / (timestamp / 1000)}`;
  requestAnimationFrame(updateData);
}

requestAnimationFrame(updateData);

#display {
  font: 21px Consolas,Monaco,monospace;
  white-space: pre;
}

<div id="display"></div>

每秒可以调用大约 60 次，符合 MDN 文档。

当上面的程序运行时，最后一个数字是每秒调用回调的次数。

但是，如果说是requestAnimationFrame()的不当使用或滥用，如下，我每秒能够获得大约250次重绘。那是什么意思呢？这是否意味着可以将 requestAnimationFrame() 推到更高的限制？尤其是现在的处理器有4核、8核、12核，显卡每1.5到2年就会增加2倍的功率，所以重绘的次数也许可以推。我查看了数据，发现经过的秒数是准确的，因此不会向 requestAnimationFrame() 提供回调溢出（每个回调都受到尊重）。

版本 2：

const elDisplay = document.querySelector("#display");

const startTime = Date.now();

let runCount = 0;

function updateData(timestamp) {
  runCount++;
  elDisplay.textContent = `${Date.now()}\n${timestamp}\n${(Date.now() - startTime) / 1000}\n${timestamp / 1000}\n${runCount}\n${runCount / (timestamp / 1000)}`;
}

function makeRequest() {
  setTimeout(() => {
    requestAnimationFrame(updateData);
    makeRequest();
  },0);
}

makeRequest();

#display {
  font: 21px Consolas,monospace;
  white-space: pre;
}

<div id="display"></div>

我能够每秒获得大约 200 次更新。如果是下面的版本 3，我什至可以在 Google Chrome 上获得 250 个更新。那是什么意思呢？意思是 requestAnimationFrame() 可以推送吗？或者我怀疑的一件事是，这是否意味着屏幕仍然仅以每秒 60 次的速度重绘，但每秒完成 250 次的事实仅意味着调用了 4 个回调并进行了“不必要的”更新DOM 的 4 次更新中，真的只有 1 次有效地显示在屏幕上吗？ （也就是说，在对 requestAnimationFrame() 的 240 次调用中，对于一组 4 次对 requestAnimationFrame() 的调用，只有 1 次真正有用，而前面的 3 次被浪费了？）它究竟是如何工作的？>

版本 3：

const elDisplay = document.querySelector("#display");

const startTime = Date.now();

let runCount = 0;

const intervalID = setInterval(() => {
  runCount++;
  requestAnimationFrame((timestamp) => {
    elDisplay.textContent = `${Date.now()}\n${timestamp}\n${(Date.now() - startTime) / 1000}\n${timestamp / 1000}\n${runCount}\n${runCount / (timestamp / 1000)}`;
  });
},1);

#display {
  font: 21px Consolas,monospace;
  white-space: pre;
}

<div id="display"></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）