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

Posted 2023-03-05

【中文标题】为啥在开发控制台启动时我在 Chrome 中获得更好的性能？

【英文标题】：Why do I get better performance in Chrome when Dev Console is up?为什么在开发控制台启动时我在 Chrome 中获得更好的性能？

【发布时间】：2015-02-06 15:59:53

【问题描述】：

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

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

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

这可能是什么原因？

---

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

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

糟糕，大窗口：

好，小窗口：

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

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

---

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

【问题讨论】：

非常酷，但是您的问题对细节有点轻描淡写。你是如何测量帧速率的？使用和不使用开发工具的帧速率差异有多大？你能展示你的真实用例吗？您是否在链接到的源中看到相同的行为？等等……

如果调出控制台更改了屏幕上绘制的图像的大小或剪辑，则您减少了每帧需要完成的工作量。

刚刚查看了您链接到的页面。（使用 i7 3537u）我得到所有演示的 60fps，但有 2 个例外。最后一个，有 2 个光源（我得到大约 42 fps）和第一个，我得到 50 到 56 fps 之间。您的 GIF 的大小非常大 - 第二个似乎有大约 800x500 的动态区域。绘制@ 32 位等于 1,6000,000 字节。这太大了，无法与浏览器正在执行的其他操作一起放入缓存中 - 预计缓存未命中会对性能产生影响是合理的。 fps显示：developer.chrome.com/devtools/docs/rendering-settings

很高兴。 :) 我不确定是 Firefox 还是 Safari，但 Chrome 有一个内置的分析器，因此可以让您准确地看到在您的应用程序中花费的时间。如果您使用 Ctrl-Shift-I 打开 JS 工具，然后打开 Profiles 选项卡，则可以选择“收集 JavaScript CPU 配置文件”。在开始分析并与页面交互一段时间后，点击停止按钮并查看结果。也许（希望）在其中一个热点中有所收获。不幸的是，并非所有浏览器都是平等的。 :( 你可能不得不接受某些方面的糟糕表现..

@enhzflep 谢谢。在我注意到控制台启动时性能的变化之前，我对游戏进行了分析并尽可能优化它。 Safari 显示最佳帧速率，但所有声音都有延迟，而 Chrome 和 Firefox 听起来不错，但帧速率要低得多。哦，好吧，html5，要习惯它。 :) 再次感谢您的帮助。

【参考方案1】：

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

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

在 Chrome 中加载此页面，这是一个相对简单的动画 CSS 演示，与您的游戏一样大小固定：http://www.subcide.com/experiments/fail-whale/ 调出 Chrome 开发者窗口（将其弹出，使其成为一个独立窗口）并启用“显示 FPS 仪表”选项。 缩小窗口大小，使其仅包含失败的鲸鱼演示。记下您的 FPS。 现在将窗口调整为大或全屏。记下您的 FPS。

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

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

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

【讨论】：

如果我知道如何更改它，我一定会在这里发帖。谢谢。

@tborenst 出于好奇，你运行的是什么操作系统和版本？

Mac OS X 版本 10.9.4，但在 10.9.5 上也尝试过，效果相同。不过我想都不是最新版本。

我问的原因是我在 OSX 10.8 上并注意到我在 10.10 上的另一台 Mac 没有那么多问题。所以我将 10.8 升级到 10.10，问题减少了 90%。 FPS 仍然有所下降，但在失败鲸鱼示例中，我在全屏下获得 50FPS，在小窗口下获得 60 FPS。我没有在操作系统升级之间升级 chrome。

嗯，有趣。谢谢！我会升级它，看看是否能减少问题。