为什么在开发控制台启动时我在 Chrome 中获得更好的性能？

Question

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

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

我的帧率在 Safari 中非常好，在 Chrome 中是 meh，而在 Firefox 中无法播放。但是，如果我在玩游戏时打开 Chrome 开发者控制台，则帧速率与 Safari 相同。

这可能是什么原因？

---

在 cmets 提出窗口大小可能会影响帧率后，我发现窗口越小，游戏运行越流畅，但仅在 chrome 中。在屏幕上绘制的数量或游戏使用的任何计算完全不取决于屏幕尺寸。

我纯粹用肉眼测量帧率差异，你可以在这些 gif 中看到效果：

糟糕，大窗口：

好，小窗口：

游戏在浏览器中的运行比在这些 gif 中显示的要流畅得多，但效果仍然很明显。

我可以在我发布的链接中的第一个示例中获得相同的效果。是只有我还是其他人有同样的效果？

---

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

Answer 1

我在我的页面/应用程序中也看到了这一点。这个问题似乎适用于任何事情，但在画布和加速 CSS 中更为明显。据我所知，这个问题是与 Chrome 的composited layer rendering 相关的性能错误。基本上，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 将不会受到开发者控制台是否启动的影响。

这似乎是发生这种情况的“原因”。现在，如果有人知道可以做些什么，我当然很想知道。