html5 canvas一般性能提示

Question

我正在为html5画布开发游戏，主要针对移动设备。画布调整为最大可用分辨率，因此几乎可以制作全屏游戏。

在一个1024x786画布的ipad上;在这样的分辨率下，我注意到帧速率显着下降。在iPhone上480x320这样的小分辨率游戏运行顺畅！我想这是因为该设备的填充率有限。

无论如何我想尽可能优化。如果您能发布有关html5画布开发的任何一般性能提示，我将非常感激。

Answer 1

另请参阅这篇关于html5rocks的canvas performance optimization文章，其中包含包含移动浏览器的jsperf数据。

Answer 2

您可以阅读Thomas Fuchs撰写的Making an iPad HTML5 App & making it really fast

他提出的要点：

1. 图像放慢了速度 - 摆脱它们
2. 避免使用text-shadow＆amp; box-shadow
3. 硬件加速非常新......而且有些错误（并发动画是有限的）
4. 尽可能避免opacity（有时会干扰硬件加速渲染）
5. 使用translate3d，而非translate（后者不是硬加速）

其他一些可以显着改善绩效的要点：

• 尽可能不频繁地使用getImageData（主要减速）[2]
• 组合多个画布以重新绘制更频繁更改的较小部分

您还可以使用Chrome / Firebug Profile 基准您的应用，向您展示哪些功能很慢。

[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip

Answer 3

还有几个链接：

• HTML5 Games 0.2: Integers are Your Friends
• HTML5 Canvas Performance in deviantART muro
• Game Engine Listing。尤其是额外链接的“其他”。

由于我对你的游戏不够熟悉，因此很难提供任何具体的提示。但是，您可能希望将渲染拆分为多个图层。这有意义，特别是如果你有一些静态元素。通过这种方式，您可以避免一些清除，并最终获得更好的代码。