requestAnimationFrame
。
在现代屏幕上,刷新率可能比每秒60帧高很多。如果这些调用中有很多内容 - 它可能会影响应用程序的整体性能。
所以我的问题是:requestAnimationFrame
总是被限制在60FPS?人眼真的能说出例如16ms和8ms重绘延迟之间的区别吗?
[UPDATE] 我最终将它降低到60FPS,以便在具有高刷新率的屏幕上获得更高的性能。 并且会向每个拥有大量内容的人提出这种方法。 当然,你应该做自己的测试。
答案 0 :(得分:4)
每MDN它不一定总是60 FPS。
相关引用:
这将请求在浏览器执行下一次重绘之前调用您的动画函数。回调次数通常为每秒60次,但 通常会根据W3C推荐 在大多数网络浏览器中与显示刷新率匹配。在后台选项卡中运行时,回调率可能会降低到较低的速率。
至于人眼可以区分60对120 FPS,那么这是一个开放的,自以为是的问题。有些人声称看到它,其他人声称这是不可能的。允许最终用户选择(或者只是简单地使用他们的硬件)可能是最好的。
正如markE's comment所指出的那样。 requestAnimationFrame
回调会收到DOMHighResTimeStamp
,这是一个精确到“thousandth of a millisecond.”的高精度计时器。通过使用此时间戳,并计算帧之间的差值,您可以调整刷新率达到预期的价值。
<强>参考文献:强>
注意: 请记得发表评论以解决任何问题,否则它们无效反馈。
答案 1 :(得分:0)
我猜那些拥有120hz或更高帧率显示器的人都知道需要更多资源来生成两倍的帧。
那和/或他们拥有比大多数用户更强大的计算机。我个人拥有一台功能非常强大的PC,但有两台60hz显示器,而且我认识的唯一一款显示器帧速率高于60hz的显示器是专业游戏玩家,所以显然他在浏览网页时没有性能问题。
此外,使用非常高的帧率显示器的人们已经习惯了这种流动性,他们可能会注意到差异(如果我怀疑它会发生事件)。
我的两分钱是:尊重他们有过度杀伤力的表现。这就是他们想要的。
答案 2 :(得分:-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'将替换为本机屏幕帧速率(您必须自己计算)。