3

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

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

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

在此处输入图像描述

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

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

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

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

4

2 回答 2

0

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

我还不知道为什么会这样，但它可能是浏览器内部的某种内部数据结构或数据类型问题（可能它使用散列并且需要在那时增长表）。你的测试在我的 chrome 浏览器上实际上是无效的——它没有表​​现出同样的性能下降。

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

希望这可以帮助！

于 2013-09-26T20:19:09.057 回答
0

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

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

于 2013-01-18T12:27:19.987 回答