Javascript html5画布一般性能提示

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

在ipad上，将是1024x786画布；在这样的分辨率下，我注意到帧率显著下降。在更小的分辨率上，如iphone上的480x320，游戏运行平稳！我猜这是因为设备的填充率有限

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

您可以阅读Thomas Fuchs的文章

他提出的要点是：

图像极大地降低了速度——摆脱它们

避免

文本阴影

和

框阴影

硬件加速是非常新的…而且有缺陷（并发动画是有限的）

尽可能避免不透明度（有时会干扰硬件加速渲染）

使用

translate3d

，而不是

translate

（后者不是硬加速）

可以显著提高性能的其他一些要点：

• 尽量少使用

  getImageData

  （严重减速）[2]
• 组合多个画布，以便重新绘制更频繁更改的较小零件

您还可以基准测试使用Chrome/Firebug配置文件的应用程序可以显示哪些功能比较慢

---

[2] 还有几个链接：

• 。更多链接请参见esp“其他”

---

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

另请参阅html5rocks上的这篇文章，其中包含包括移动浏览器在内的jsperf数据。

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