requestAnimationFrame调用是否总是被抑制到60 FPS.只要屏幕准备重新绘制，就会调用

Shall the requestAnimationFrame calls always be throttled down to 60 FPS?

本文关键字：调用 新绘制 绘制 屏幕 是否 FPS requestAnimationFrame      更新时间：2023-09-26

requestAnimationFrame。在现代屏幕上，刷新率可能远高于每秒60帧。如果这些调用中发生了很多事情，可能会影响应用程序的整体性能。

所以我的问题是：requestAnimationFrame是否总是被节流到60FPS？例如，人眼真的能分辨出16毫秒和8毫秒重新喷漆延迟之间的区别吗？

[更新]为了在高刷新率的屏幕上获得更高的性能，我最终将其限制在60FPS。并向所有在rAF调用中有很多事情发生的人建议这种方法。当然，你应该自己做测试。

每个MDN不一定总是60 FPS。

相关报价：

这将要求在浏览器执行下一次重新绘制之前调用动画函数。回调次数通常为每秒60次，但根据W3C建议，回调次数通常与大多数web浏览器中的显示刷新率相匹配。当在后台选项卡中运行时，回调速率可以降低到较低的速率。

至于人眼能区分60和120 FPS吗，这是一个开放的、固执己见的问题。有些人声称看到了，另一些人则声称这是不可能的。允许最终用户进行选择（或者只是充分使用他们的硬件）可能是最好的。

正如markE的评论所指出的。requestAnimationFrame回调接收一个DOMHighResTimeStamp，这是一个精确到"千分之一毫秒"的高精度计时器。通过使用此时间戳并计算帧之间的增量，您可以将刷新率调整到所需的值。

参考文献：

  • requestAnimationFrame
  • W3C基于脚本的动画定时控制
  • DOMHighRes时间戳

注意： 请记得留下评论来解决任何反对票，否则这些都不是有用的反馈。

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

和/或他们拥有比大多数用户更强大的计算机。我个人有一台功能强大的电脑，但有两个60hz的显示屏，我认识的唯一一个帧速率高于60hz的人是专业玩家，所以很明显，他在浏览网页时没有性能问题。

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

我的两分钱是：尊重他们对过度展示的偏好。这是他们想要的。

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

•高帧率意味着更多的热量，因此（cpu）风扇噪音会很烦人
•在大多数比赛中，没有人会注意到
•这很容易做到。
•对于那些有生态问题的人来说，高fps会消耗更多的电力（===>更多的二氧化碳）。

关于120赫兹的视觉兴趣：
对于2D游戏来说，每一帧之间只有很小的屏幕变化，这几乎没有兴趣
对于3D游戏，尤其是那些以逼真为目标的游戏，使用120Hz可以获得更像"电影院"的体验
为什么
===>大多数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的屏幕上，帧持续时间也可以从14毫秒到19毫秒。（！！！）因此，在将帧速率限制为某个值时，必须留出一些余量。

Rq2：在上面的例子中，"典型帧"将被本地屏幕帧速率取代（您必须自己计算）。

相关文章：