如果画布大于 255x220，为什么 FPS 会下降？答案

【问题标题】：Why does FPS go down if canvas is larger than 255x220?如果画布大于 255x220，为什么 FPS 会下降？
【发布时间】：2014-02-18 07:54:36
【问题描述】：

我发现 HTML5 画布有一个奇怪的现象。我的帧速率低于预期，但仅在 Firefox 中，并且仅在一台计算机上（但不是在我测试的另一台计算机上）。奇怪的是，如果我将画布尺寸减小到 255x250 或更小，Firefox 的性能与其他浏览器相似。如果我在宽度上再增加一个像素，FPS 会迅速下降到三分之一。

我制作了一个 jsPerf 来演示这个问题：http://jsperf.com/critical-canvas-size （确保灰色矩形在屏幕上。如果没有，我会让测试失败，因为我发现如果你不小心滚动离开它会改变结果。）

所有四个测试用例都与大多数系统上的大多数浏览器非常相似，但在这台装有 Firefox 17 的 PC 上，我看到以下内容：

有问题的 PC 运行的是旧版 Red Hat Linux，我猜它可能没有硬件加速支持（从操作系统方面）。

那么，这可能是什么原因？我可以在我的代码中做些什么来规避这个问题吗？（例如，我一直在考虑使用几张小画布而不是一张大画布。）

编辑：这是一个独立的 html 文件 that exibits the problem 和 one that doesn't。唯一的区别是画布的宽度，251 vs. 250。（你可以注释掉微调器动画，这只是为了让问题可见。另外请原谅FPS计时器的准确性，它的实现很简单。）

250px 的版本大约 60 FPS，实际上它似乎有上限。您可以增加numIterations 变量以使框架函数绘制多个图块。我可以达到 numIterations = 100 或 120000 块/秒，同时仍然具有不错的帧速率。但是，即使 numIterations = 1，251px 版本也能提供低于 20 或低于 1000 块/秒的帧速率。

【问题讨论】：

我不确定您的结果是否与画布的大小直接相关。
还能是什么？画布大小是我唯一改变的东西。我尝试了许多不同的尺寸。低于 255x250（或 300x212）它是平滑的，在宽度或高度上增加一个像素，帧率下降到三分之一。在这两种情况下，我肯定会绘制相同数量的像素。
您的测试假设requestAnimationFrame 将始终以一致的时间间隔解决，这根本不正确。虽然这可能是 FF 构建的问题，但我认为不能完全依赖测试。例如，我在每个不同的测试中得到 +/- 10 fps 的差异，没有明显的原因（Chrome 24、Win 7）。我建议更多地运行测试，可能会更改测试运行的顺序，然后您可能能够确定一些相关性。
问题不在于jsperf！问题出现在一个独立的 HTML 文件中，即我正在绘制的动画变得超级抖动。我刚刚制作了 jsperf 来尝试演示它。（不？）幸运的是，这个问题似乎只发生在某些系统上。（顺便说一句，该测试测量从 requestAnimationFrame 调用到回调完成的平均时间，我通常会在其中发出另一个调用。这是我感兴趣的实际数字，因为它限制了最大帧速率。）跨度>
jsPerf使用的动画和你的问题代码中的动画一样吗？

标签： firefox html5-canvas

【解决方案1】：

这是有道理的，因为绘制到画布和清除画布是昂贵的方法；如果您有一个较小的画布并在每个动画步骤上调用clearRect，那么它将比运行完全相同代码的较大画布执行得更好。最好的办法是优化您的绘制方法只清除每一帧的变化。一旦你这样做了，你会注意到性能提升； this article 将有助于您提高性能的其他领域。

我也在使用画布进行开发，发现通常基于 WebKit 的浏览器在大多数情况下比 Gecko 更快地处理画布操作。

【讨论】：

这不是 clearRect，我只是添加了两个显示问题的示例 HTML 文件，但不要使用 clearRect。两者都绘制完全相同的像素数。
事实上，clearRect 不应该有所作为，因为它是 a) 基本上只是一个 memset 在幕后，b) 在 jsperf 中我总是清除 200x200 像素，c) 即使我会绘制更多像素，在 1 像素宽的画布上进行任何操作都只需要多花费 ~1/250=0.4% 的时间（而不是 200%）。

【解决方案2】：

我实际上看到了类似的行为。我相信这是当您越过 65776 像素障碍时 -> 而不是您所期望的 65536。

我还不知道为什么会出现这种情况，但很可能是某种内部数据结构或数据类型问题（可能是它使用了哈希并且需要在那个时候增加表点）在您的浏览器中。你的测试在我的 chrome 浏览器上实际上是无效的 - 它没有表现出同样的性能下降。

我写了一些测试用例 http://jsperf.com/pixel-count-matters/2 和 http://jsperf.com/magic-canvas/2

希望这会有所帮助！

【讨论】：