html5 canvas 通用性能提示答案

【问题标题】：html5 canvas general performance tipshtml5 canvas 通用性能提示
【发布时间】：2011-07-02 03:16:15
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

更多链接：

由于我对您的游戏不够熟悉，因此很难给出任何具体的提示。不过，您可能希望将渲染拆分为多个图层。如果那里有一些静态元素，这尤其有意义。这样你就可以避免一些清理工作并最终得到更好的代码。

【讨论】：

【解决方案3】：

他提出的要点：

可以显着提高性能的其他几点：

您还可以使用 Chrome/Firebug 配置文件对您的应用进行基准测试，可以向您显示哪些功能运行缓慢。

【讨论】：

感谢您的链接。事实上我已经读过这个了。不幸的是，我的游戏严重依赖图像，所以我无法真正摆脱它们。不过我会尽量尊重其他规则！
这篇文章对这个问题的回答具有误导性：它的主题不是画布，而是一般的 html5 编码。这里给出的大部分要点都适用于完全独立于画布的问题，例如 html 元素的 css 属性。在画布上绘制复杂形状时，使用和缓存图像（作为屏幕外画布）实际上是一种很好的做法。