html5 canvas 通用性能提示

Posted 2023-03-05

【中文标题】html5 canvas 通用性能提示

【英文标题】：html5 canvas general performance tips

【发布时间】：2011-07-02 03:16:15

【问题描述】：

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

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

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

【问题讨论】：

关于Pixel Manipulation性能优化的两篇文章：-elekslabs.com/2012/11/html5-canvas-performance-and.html-elekslabs.com/2012/11/html5-canvas-performance-and_9.html

【参考方案1】：

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

【讨论】：

这基本上是可以存在的关于该主题的最佳文章。

【参考方案2】：

更多链接：

HTML5 Games 0.2: Integers are Your Friends HTML5 Canvas Performance in deviantART muro Game Engine Listing。见特别。 “其他”表示额外链接。

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

【参考方案3】：

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

他提出的要点：

图像极大地减慢了速度——摆脱它们 避免text-shadow & box-shadow 硬件加速是相当新的……而且有问题（并发动画是有限的） 尽可能避免使用opacity（有时会干扰硬件加速渲染） 使用translate3d，而不是translate（后者不是硬加速）

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

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

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

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

【讨论】：

感谢您的链接。事实上我已经读过这个了。不幸的是，我的游戏严重依赖图像，所以我无法真正摆脱它们。不过我会尽量尊重其他规则！

这篇文章对这个问题的回答具有误导性：它的主题不是画布，而是一般的 html5 编码。这里给出的大部分要点都适用于完全独立于画布的问题，例如 html 元素的 css 属性。在画布上绘制复杂形状时，使用和缓存图像（作为屏幕外画布）实际上是一种很好的做法。