javascript - HTML5 Canvas 在某些移动浏览器中的性能问题。

Question

您好，我有一个 Web 应用程序，它应该能够在智能手机和桌面浏览器上运行。虽然我期待在像 Iphone 这样的小型设备上得到一些奇怪的行为，但我非常有信心它会在 Android Galaxy Tab 上运行良好，这是我目前可以运行测试的 Android 设备。

现在我已经在 Galaxy Tab 上安装了一堆浏览器来测试:

• Android 原生浏览器
• 安卓版 Chrome
• Android 版火狐

在我用过的桌面上

• 火狐
• 谷歌浏览器

我终于有一部 Iphone 可以用来测试了。

该网站使用 HTML5 canvas 进行基于像素和 Sprite 的绘图，没有花哨的转换、过滤器或效果，主要是简单的路径和多边形。我会监听触摸事件并使用 requestAnimationFrame 进行适当的重绘。

总体而言，该应用程序在桌面浏览器上运行良好，在 iOS Safari (iPhone) 和 Firefox-on-Android 上也运行良好。然而 Android 的原生浏览器给我带来了麻烦。我已将其设置为当 javascript 没有响应时屏幕会呈红色闪烁，并且几乎总是在触摸屏幕时闪烁。

所以我想知道 Android Native App 和 HTML5 是否存在任何已知问题。由于 native 浏览器的名称不存在，因此很难通过谷歌搜索相关信息。 我有什么想法可以从哪里获得更多信息？有什么想法可能导致 native Android 浏览器滞后吗？

关于这个问题有几点想法:

• iOS 不支持 requestAnimationFrame，因此我将其替换为基于超时的替换。如果我在 Android 的 native 浏览器上使用该替代品，问题仍然存在。

• 我经常使用 AJAX (google clojure xhrio) 从服务器检索数据。会不会是数据检索回调阻塞了我的事件管道？

• 是否已知日志控制台消息 (console.log) 会降低应用程序的速度？他们能否触发浏览器通过 DOM 树或任何相关的东西重新运行？

Answer 1

我在许多浏览器中用 Canvas 做了很多实验。我注意到的一些性能问题:

首先，关于你的猜测:

• 当浏览器支持 requestAnimationFrame 时，绘图内容和应用程序本身的响应速度更快。使用 setTimeout 或 setInterval 作为回退总是可行的，但您需要注意时间安排。这robust polyfill可能会有一点帮助，但与原生 requestAnimationFrame 相比没什么帮助。

• 如果每帧(或几乎每帧)都调用 console.log，那么性能会下降。 由于 native Android 浏览器没有控制台对象，每次调用它都会产生一个错误，这也会导致您的应用程序变慢。你可以这样做:

  if(typeof console === "undefined"){ 控制台 = {}; }

• 用于密集的实时应用 web sockets比 http 请求更快。不幸的是，旧的原生 Android 浏览器不支持此功能。如果无法使用网络套接字，则应尽量减少 http 请求。

备注:Chrome for android 支持此处引用的大多数 HTML5 功能，包括 requestAnimationFrame 和 websockets。

更多信息:

• 使用上下文 2d fillText 绘制文本太昂贵了，但在某些浏览器中，这甚至更糟。在另一个 Canvas 中预渲染您的文本或使用位图字体。 (在 native Android 浏览器中，在替换预渲染内容的 filltext 绘图后，在我制作的某些游戏中，性能从 10-15 FPS 提高到 30-45 FPS)。

• 避免缩放和旋转上下文，因为它们也会导致性能下降。如果您只需要缩放或旋转 Sprite 一次，请使用预渲染。

• 您需要尽量减少实时绘图。尽可能预渲染你的东西。仅重绘已更改且需要更新的内容。

• 尝试写memory efficient和垃圾收集器友好的代码。

还有很多事情要做。我只是举了几个。

提示:对您不确定它们是否是性能 killer 的功能进行一些压力测试并获取基准测试结果。

在移动应用程序中，特别是实时应用程序，无论是过度优化还是一点内存增益，所有优化都是受欢迎的。

有关更多信息，请点击以下链接:

• http://www.html5rocks.com/en/tutorials/canvas/performance/ (绝对应该参观这个)
• http://www.html5rocks.com/en/features/performance

也可以在 Posts & Tutorials 中搜索性能.

编辑
这jsfiddle code snippet显示了此答案中涵盖的一些内容，并提供了一个粗略的基准 fps 计数器。自己编辑这个 fiddle 并检查一下。