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

Question

我目前正在开发一款从头开始用纯JavaScript编写的小型画布游戏。

游戏涉及2d光照算法similar to this one，但有一个光源和25个多边形，每帧约 30,000次计算。

我在Safari中的帧速率很棒，在Chrome中是meh，在Firefox中无法播放。但是，如果我在玩游戏时使用Chrome开发者控制台，则帧速率与Safari相同。

这可能是什么原因？

---

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

我只用眼睛测量帧速率差异，你可以在这些GIF中看到效果：

糟糕，大窗口

好，小窗口：

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

我可以通过我发布的链接中的第一个示例获得相同的效果。只是我或其他任何人都有同样的效果吗？

---

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

Answer 1

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

这是一个独立的例子。重现的步骤：

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

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

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

这似乎是＆＃34;为什么＆＃34;这种情况正在发生。现在，如果有人知道可以做些什么，我当然有兴趣知道。