谷歌chrome和FPS的奇怪行为

Strange behavior with google chrome and FPS

本文关键字：chrome FPS 谷歌      更新时间：2023-09-26

我已经编写了一个小引擎，在Canvas2D中使用javascript显示5个精灵。一切都很好，完全优化了。

FPS在30到60之间波动，但有趣的是，当谷歌javascript控制台打开时，它显示的是恒定的60 FPS！

还有其他人经历过这种情况吗？

n.b.我正在使用requestAnimationFrame

编辑：

示例：http://jsfiddle.net/jrPNy/1

使用"粒子数"进行"四处播放"，使您的fps约为40-50。然后打开控制台，它会达到每秒60帧。（铬21.0.1180.83）

正如问题作者在评论中所说，这与可见的画布区域有关。打开控制台会降低视口的高度，这在正常大小的显示器上意味着要渲染的内容会减少。60FPS是由显示器刷新率给出的软限制；做更多的帧是没有意义的，因为在普通显示器上不可能每秒显示超过60帧。

我在我的机器上测试了这个，降低了CPU速度，这样我就不会总是得到60FPS。在提供的Fiddle示例中，我通常有大约24FPS。打开控制台将可见画布缩小到原始大小的60%左右，FPS平均增加到30。调整控制台的大小会相应地影响FPS：在只有10%的画布可见的情况下，FPS在42左右摆动，而在一个非常小的控制台和整个画布可见的条件下，FPS略低于原始值，达到23。无论控制台的状态如何，增加CPU速度都会使FPS达到恒定的60。

现在，考虑到生成屏幕的JavaScript仍在运行，无论画布有多少是可见的，影响所需处理能力的是画布的实际渲染，以及画布图像合成到HTML的其余部分、浏览器窗口和屏幕上的方式。越来越多的工作被转移到GPU上，所以当合成过程的每个阶段都将在OpenGL中完成时，FPS应该总是达到最大值。

我在macbook上使用chrome时也经历了同样的事情。osx停靠似乎导致帧速率下降，当您打开控制台时，视口移动到离停靠足够远的位置，帧速率可以恢复到60fps。如果将窗口从固定位置移开，则帧速率会上升。如果自动隐藏底座，则可以在不打开控制台的情况下实现60fps的全屏显示。

对我来说，最好的方法是使用函数

//Don't change these variable names
const times = [];
let fps;
//Replace refreshLoop with the name of your animation loop
function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now();
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift();
    }
    times.push(now);
    fps = times.length;
    //Replace refreshLoop with your animation loop here as well
    refreshLoop();
  });
}
//Don't forget to call it again here if you haven't!
refreshLoop();

注意：切换选项卡时，将出现低FPS。当您切换回显示FPS的选项卡时，它将增加，直到实际的FPS匹配为止。这不会影响性能显示本身。

谷歌chrome使用vsync，这意味着它将把FPS限制在你的屏幕FPS限制内。大多数屏幕都是60 FPS，所以如果可能的话，你的谷歌会匹配它，但不会超过它。可能有一个程序可以删除vsync，但我知道Nvidia驱动程序可以控制它，但你需要GTX 610或更高版本才能完成

相关文章：