Question

每当屏幕准备好重新绘制时，都会调用

requestAnimationFrame。在现代屏幕上，刷新率可能比每秒60帧高很多。如果这些调用中有很多内容 - 它可能会影响应用程序的整体性能。

所以我的问题是：requestAnimationFrame总是被限制在60FPS？人眼真的能说出例如16ms和8ms重绘延迟之间的区别吗？

[UPDATE] 我最终将它降低到60FPS，以便在具有高刷新率的屏幕上获得更高的性能。并且会向每个拥有大量内容的人提出这种方法。当然，你应该做自己的测试。

Answer 1

每MDN它不一定总是60 FPS。

相关引用：

这将请求在浏览器执行下一次重绘之前调用您的动画函数。回调次数通常为每秒60次，但 通常会根据W3C推荐 在大多数网络浏览器中与显示刷新率匹配。在后台选项卡中运行时，回调率可能会降低到较低的速率。

至于人眼可以区分60对120 FPS，那么这是一个开放的，自以为是的问题。有些人声称看到它，其他人声称这是不可能的。允许最终用户选择（或者只是简单地使用他们的硬件）可能是最好的。

正如markE's comment所指出的那样。 requestAnimationFrame回调会收到DOMHighResTimeStamp，这是一个精确到“thousandth of a millisecond.”的高精度计时器。通过使用此时间戳，并计算帧之间的差值，您可以调整刷新率达到预期的价值。

<强>参考文献：

注意： 请记得发表评论以解决任何问题，否则它们无效反馈。

Answer 2

我猜那些拥有120hz或更高帧率显示器的人都知道需要更多资源来生成两倍的帧。

那和/或他们拥有比大多数用户更强大的计算机。我个人拥有一台功能非常强大的PC，但有两台60hz显示器，而且我认识的唯一一款显示器帧速率高于60hz的显示器是专业游戏玩家，所以显然他在浏览网页时没有性能问题。

此外，使用非常高的帧率显示器的人们已经习惯了这种流动性，他们可能会注意到差异（如果我怀疑它会发生事件）。

我的两分钱是：尊重他们有过度杀伤力的表现。这就是他们想要的。

Answer 3

默认情况下，我认为将帧速率限制为60Hz是好的，因为：

•高帧率意味着更多的热量，因此（cpu）风扇噪音会很烦人 •对于大多数游戏，没有人会注意到 •这很容易做到。
•对于那些有生态问题的人来说，高fps使用更多功率（==>更多CO2）。

关于120 Hz的视觉兴趣：
对于在每个帧之间实际只有少量屏幕实际变化的2D游戏，它几乎没有兴趣对于3D游戏，特别是那些瞄准逼真的游戏，使用120Hz可以获得更像“电影”般的体验为什么？ ==＆GT;大多数3D渲染器只能及时在点渲染场景，因此您看到的是一系列“完美”静止图像。
另一方面，真实的相机将像人眼一样保持打开几毫秒，因此在此期间发生的移动将在图像上留下痕迹，提供更真实的体验。

60Hz的边界只够愚弄运动，所以120Hz +屏幕带来的是屏幕是如此快速的眼睛剩磁无法跟随你再次拥有相机/眼睛跟踪效果。

代码如下：

var minFrame = 13;
var maxFrame = 19;
var typicalFrame = 16;

var gameTime = 0;

var lastDrawTime = -1;

animate(drawTime) {
   requestAnimationFrame(animate);
   var dt = drawTime - lastDrawTime;
   lastDrawTime = drawTime ;
   if (dt<minFrame) return;
   if (dt>maxFrame) dt=typicalFrame; // in case of a tab-out
   gameTime+=dt;
   // ...
}

function lauchAnimation() {
    requestAnimationFrame ( function(t) { lastDrawTime = t;
                                          requestAnimationFrame(animate);  } );        
}

Rq1：限制fps时，必须注意浏览器中帧速率不稳定的事实。
因此，即使应用程序无效，在60Hz屏幕上，帧持续时间可以从14ms到19ms。（!!!!）因此，在将帧速率限制为某个值时，必须采取一些余量。

Rq2：在上面的示例中，'typicalFrame'将替换为本机屏幕帧速率（您必须自己计算）。

requestAnimationFrame调用是否总是被限制为60 FPS？

3 个答案: