我正在开发一个 html5 canvas 游戏，主要针对移动设备。画布大小已调整为最大可用分辨率，因此几乎可以制作全屏游戏。
在 iPad 上，这将是 1024x786 的画布；在这样的分辨率下，我注意到帧速率显着下降。在 iPhone 上的 480x320 等较小分辨率下，游戏运行流畅！我想这是因为该设备的填充率有限。
无论如何，我想尽可能地优化。如果您能发布任何有关 html5 canvas 开发的一般性能技巧，我将不胜感激。
I am developing a game for html5 canvas while mainly targeting mobile devices. The canvas is resized to the biggest available resolution, so that it almost makes a fullscreen game.
On an ipad that would be a 1024x786 canvas; at a resolution like this I notice a significant drop in framerate. On smaller resolution like 480x320 on iphone the game runs smooth! I guess this is because the device is fillrate limited.
Anyhow I would like to optimize as much as possible. I would be very grateful if you could post any general performance tips that you have for html5 canvas development.
发布评论
评论（3）
另请参阅这篇关于 html5rocks 的 canvas 性能优化 文章，其中包含 jsperf 数据，其中包括移动浏览器。
Also see this canvas performance optimization article on html5rocks, which contains jsperf data which includes mobile browsers.
您可以阅读 制作 iPad HTML5 应用程序和让它变得非常快 作者：Thomas Fuchs
他提出的要点：
text-shadow& ;box-shadow不透明度（有时会干扰硬件加速渲染）translate3d，而不是translate（后者不是硬加速）其他一些可以改进的点显着提高性能：
getImageData（速度大幅下降）[2]您还可以基准测试带有 Chrome/Firebug Profile 的应用程序可以向您显示哪些功能运行缓慢。
[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip
You can read Making an iPad HTML5 App & making it really fast by Thomas Fuchs
The key points he make:
text-shadow&box-shadowopacityif possible (sometimes interferes with hardware-accelerated rendering)translate3d, nottranslate(the latter is not hard-accelerated)Some other points that can improve performance significantly:
getImageDataas infrequently as possible (major slowdown) [2]You can also benchmark your app with Chrome/Firebug Profile can show you which functions are slow.
[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip
更多链接：
由于我对你们的游戏还不够熟悉，所以很难给出任何具体的提示。不过，您可能希望将渲染分割为多个层。如果那里有一些静态元素，这尤其有意义。通过这种方式，您可以避免一些清理并最终得到更好的整体代码。
A couple of more links:
It's hard to give any specific tips as I'm not familiar enough with your game. You might want to split up rendering to multiple layers, though. This makes sense particularly if you have some static elements there. This way you can avoid some clearing and end up with nicer code overall.