如何为Mobile Safari优化HTML5 Canvas和JavaScript Web应用程序？

我创建了一个HTML5 Canvas和JS游戏，该游戏在Chrome上的台式机或笔记本电脑（30fps）上运行良好，但在移动Safari上只能达到8 fps。有没有简单的技巧或窍门来提高帧率？

不幸的是，答案是少花钱。我发现基于画布的应用程序的瓶颈（实际上在任何平台上）都是实际绘制像素所需的时间。

这里有一些尝试：

1. 使用几个画布层。在将对象绘制到另一层（绝对位于背景层的顶部）时，将背景绘制到一层。（注意：我尚未在移动Safari浏览器中尝试过此方法，但它可以在其他平台上提供帮助）

2. 仅重绘已更改的精灵。这很棘手，但绝对可以提高性能。这个想法是存储是否需要重绘一个精灵，并且仅重绘需要它的精灵及其背后的背景。（这也需要级联到其他可能重叠的对象。）

在Chrome上进行开发的原因是：a）其JavaScript引擎（V8）的运行速度极快，并且b）最新版本（7、8、9）在画布渲染方面都具有一些GPU加速。再加上移动硬件不像台式机/笔记本电脑那么强大，这意味着要在移动浏览器上获得几乎相同的性能真的很困难。

我认为，目前最好的方法可能是从一开始就将您的游戏定位于移动Safari并尝试构建一款不那么需要重画的游戏。

这有点远，但是您的游戏可以使用CSS转换对DIV精灵进行操作吗？我之所以这样说，是因为通过CSS转换和过渡在iOS设备上移动东西获得了一些出色的性能。

这些似乎是适当的硬件加速，奇怪的是，您必须使用3D形式进行转换（例如，translate3D而不是translate），才能进行加速。这确实非常流畅，iOS浏览器实现支持您只需直接设置一个16元素浮点矩阵的形式，这对我来说非常方便。

最终的流畅程度给我留下了深刻的印象，我一直试图尝试以这种方式编写的简单游戏项目。

如果是画线，请在调用描边之前组合尽可能多的lineTo命令。

这和其他一些技巧：http : //dt.deviantart.com/blog/38471599/

@Gosub的所有内容都加上：

看看您正在执行的数学运算，看看是否有必要使用更高效的算法。

使用较小的图像。尝试使图像的幂为2

看看是否可以摆脱画布上的Alpha混合效果，或者不使用CSS opacity属性。

请发回您的结果。知道什么最有帮助会很有趣。

我不愿意在旧线程中添加答案-但令我惊讶的是没有人提到这一点。

在编写第一个游戏时，只需编写它们以达到期望的性能即可。上面的技术是保持高性能的良好起点-但真正的诀窍是探查器。如果您在Chrome或Firefox中对应用程序进行配置文件（提示：请使用多种方法，以便可以看到确切的瓶颈；因此您以后不必移动任何内容-无论如何都应该这样做）。准确的计时结果。就我而言，我看到不断重绘背景花费了80％的浏览器时间。将其移开后，我看到其他电话分别占40％或更多。一两个小时后，我看到了可观的FPS增长。

我也想听听你的结果。我一直在尝试做同样的事情。我发现进行大量数学运算就可以了，但是一旦您在其中放了一块画布，它的智力和帧率就会下降。

我有一个显示效果的前景叠加层。这是一个非常高质量的图像，但是Alpha东西使它放慢了很多，以至于我以每秒更多的帧为代价将其完全丢弃。

我所做的另一件事是使用PHP来计算一些繁重的数学运算。我拥有大型数据集，但我决定让PHP来工作并让JavaScript显示结果，而不是让JavaScript计算和显示数据。这并没有节省很多时间，因为JavaScript在数学上是“安全的”。

我认为您的整个网站都使用HTML5，因此请尝试与后台工作人员一起玩。

希望我能帮助您，并分享您的结果。