为什么在Dev Console启动时我会在Chrome中获得更好的性能？

Question

我正在开发一个从头开始用纯JavaScript编写的小型画布游戏.

该游戏涉及类似于此的2d照明算法,但是具有一个光源和25个多边形,这使得每帧大约30,000次计算.

我的帧速率在Safari中非常棒,在Chrome中也是如此,在Firefox中无法播放.但是,如果我在玩游戏时使用Chrome开发人员控制台,则帧速率与Safari相同.

这可能是什么原因？

---

在评论建议窗口大小可能影响帧速率后,我发现窗口越小,游戏运行越平滑,但仅限于chrome.屏幕上绘制的数量或游戏使用的任何计算完全不依赖于屏幕尺寸.

我只用眼睛测量帧速率差异,你可以在这些gif中看到效果:

糟糕的大窗户:

好,小窗口:

浏览器中的游戏运行比这些GIF中显得更顺畅,但效果仍然明显.

我可以通过我发布的链接中的第一个示例获得相同的效果.它只是我或其他人是否有同样的效果？

---

更奇怪的是......当我滚动主页时​​,我在其他几个网站上也有同样的效果,比如Facebook.窗口越大,滚动越陡.这是Chrome特定的东西,是否有人得到类似的结果？

Answer 1

我在我的网页/应用程序中也看到了这一点.这个问题似乎适用于任何事情,但是使用canvas和加速CSS更加明显.据我所知,这个问题是与Chrome的合成图层渲染相关的性能错误.基本上,Chrome会将页面分成几层,并使用GPU渲染这些图层.您可以通过在开发控制台的"渲染"选项卡中启用"显示合成图层边框"选项来查看这些内容.随着复合层数量的增加,Chrome的FPS性能会下降,无论层是否发生变化.

这是一个独立的例子.重现步骤:

1. 在Chrome中加载此页面,这是一个相对简单的动画CSS演示,其大小与游戏类似:http://www.subcide.com/experiments/fail-whale/
2. 打开Chrome开发人员窗口(将其弹出,使其成为一个独立窗口)并启用"显示FPS计量器"选项.
3. 将窗口缩小,使其仅包含失败的鲸鱼演示.注意你的FPS.
4. 现在调整窗口大小或全屏大小.注意你的FPS.

有一个小窗口,我得到55 FPS.全屏,我得到34 FPS.我希望FPS几乎相同,无论页面大小如何,因为动画区域不会改变.FPS似乎与可见屏幕上的复合层数成比例.此外,调整窗口大小会导致动画变得粗糙并跳过帧.如果我在Safari中执行相同的窗口大小调整,则动画保持平滑.Safari知道渲染没什么新东西,而Chrome似乎无缘无故地做了很多工作.

因此,当您的开发控制台处于打开状态时,您会看到更好的性能,这是因为您的开发控制台内嵌/嵌入了页面,这使得页面在打开时会变小.这会导致Chrome处理复合层的页面较少,从而获得更好的FPS.如果您弹出开发人员控制台,这是一个独立的窗口并且不会影响页面大小,那么您的FPS不会受到开发控制台启动或不启动的影响.

这似乎是"为什么"这种情况发生的原因.现在,如果有人知道可以做些什么,我当然有兴趣知道.