每秒请求超过60帧的requestAnimationFrame

Question

来自MDN，我有以下内容:

一定要使用第一个参数(或者其他获取当前时间的方法)来计算动画在一帧中的进度，否则在高刷新率屏幕上，动画将运行得更快。

那么，我可以假设在144Hz的显示器上，requestAnimationFrame的运行速度可以超过60fps吗？

- João Paulo

---

你能解释一下什么是“经过时间技术”吗？不确定如何在沙盒脚本的本地代码级别上“控制”（增加）刷新率。 - Daniel Cheung

抱歉，忘记关于经过的技术，它不适用于 requestAnimationFrame。 - João Paulo

根据MDN页面上的同一段落，"回调函数的数量通常是每秒60次，但在大多数Web浏览器中，它会根据W3C的建议与显示刷新率相匹配。" 所以是的。 - Daniel Cheung

不错，没看到这个！谢谢。 - João Paulo

请记住，JS依赖于浏览器。一定要在不同的浏览器上进行测试。我也不会感到惊讶，因为浏览器还依赖于桌面窗口管理程序，以便为它们提供关于显示器的可靠信息。 - Daniel Cheung

当然，另一个原因是帧可能会被密集处理延迟，如果动画不使用时间而是回调次数，则会减慢动画速度。 - T.J. Crowder

Answer 1

完全正确。

这里有一个简单的例子可以衡量：

let i = 0;
const start = Date.now();
const stop = start + 5000;

function raf() {
  requestAnimationFrame(() => {
    const now = Date.now();
    if (now < stop){
      i++;
      raf();
    }else{
      const elapsedSeconds = (now - start) / 1000;
      console.log('Frame rate is: %f fps', i / elapsedSeconds);
    }
  });
}

console.log('Testing frame rate...')
raf();

在我的电脑上，它显示为143.7401178670024。我正在使用144HZ的显示器。

- Drag13

---

我已经修改了你的代码，所以它在片段编辑器中似乎也可以工作...如果你发现有问题，请随时回滚。 - FZs

我有一台配备120Hz显示器的华硕GL502VM电脑，但我只能得到大约60帧每秒的帧率。 - Mechanic

@FZs 在两种情况下都完美运行，谢谢！ - Drag13

@Leonardo 你的刷新率设置为60吗？ - Drag13

@FireFuro99 我也是一样，144HZ的显示器和60FPS。但在我的情况下，这是可以预料的，集成显卡无法获得更多。您可以在显示设置中检查此内容。 - Drag13