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

Question

我发现了一个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与250.（你可以注释出微调器动画，它只是为了使问题可见。另外请原谅FPS计时器的准确性，它的实现非常简单。）

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

Answer 1

我实际上看到了类似的行为。我相信当你穿过65776像素屏障时 - ＆gt;不像您期望的那样65536。

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

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

希望这有帮助！