在一些手机浏览器的性能问题与HTML5画布。(Performance problems with H

您好我有一个Web应用，应该是能够在这两个智能手机和桌面浏览器一样运行。虽然我期待获得像iPhone这样的小型设备有些好奇的行为，我非常有信心，它会在Android的Galaxy Tab是Android设备，我可以在此刻与运行测试运行良好。

现在，我已经安装了Galaxy Tab的一堆浏览器来测试的事情：

Android原生浏览器
Android版Chrome浏览
Android版Firefox

在桌面上我已经使用

火狐
谷歌浏览器

最后我有一个iPhone来进行测试。

该网站使用HTML5画布绘制基础没有华丽的转型，过滤器或效果，大多是简单的路径和多边形，像素和雪碧。我不听触摸事件，并使用requestAnimationFrame正确重绘。

总体来说，应用程序运行以及在桌面浏览器，它也是在iOS Safari浏览器（iPhone）和Firefox上，运行Android很大。然而，机器人会自带浏览器是给我找麻烦。我已经将它设置，使屏幕刷新红色时，JavaScript是不敏感，并且触摸屏幕时，它闪几乎总是。

所以，我想知道是否有与Android原生应用和HTML5任何已知问题。由于原生浏览器的名称不其挺难谷歌这方面的信息。 有我的想法，我可以得到更多的信息？ 任何想法可能会导致Android原生浏览器的滞后？

有关于这一问题的一些想法：

iOS不支持requestAnimationFrame，因此，我超时基于替代取代它。如果我使用Android的原生浏览器，更换，问题仍然存在。
我使用AJAX（谷歌的Clojure xhrio）相当定期从服务器获取数据。难道是数据检索回调cloggin我的事件管线？
是对数已知应用减慢控制台消息（的console.log）？他们可能会引发浏览器通过与DOM树或任何重新运行？

Answer 1:

我已经在很多浏览器做了很多的实验，用帆布。我注意到一些性能问题：

首先，你的猜测：

当requestAnimationFrame是由浏览器，绘图的东西，应用程序支持本身更加敏感。使用setTimeout或setInterval作为后备总是可能的，但你必须要小心的时机。这种强大的填充工具可以帮助一点，但没有什么比本地requestAnimationFrame。
如果执行console.log被称为每一帧（或几乎），是性能下降。由于Android原生浏览器没有一个控制台对象，每次被调用时，将产生也有助于您的应用程序变慢的错误。你可以这样做：
if(typeof console === "undefined"){ console = {}; }
对于激烈的实时应用网络插座是快于HTTP请求。不幸的是这个功能不被老原生的Android浏览器的支持。如果它无法使用网络插座，你应该尽量减少HTTP请求。

注：浏览器支持Android的大多数HTML5功能在这里引用，包括requestAnimationFrame和websockets 。

更多信息：

使用上下文的2D绘图文字fillText太贵了，但在某些浏览器，这是雪上加霜。预渲染的文本在其他画布，或使用位图字体。（在原生的Android浏览器，更换后filltext绘制的预渲染的东西，性能10-15 FPS增长到30-45 FPS在一些比赛我做了）。
避免缩放和旋转方面，因为它们也导致性能降下来了。如果你只需要一次缩放或旋转一个精灵，使用预渲染。
你需要尽量减少实时绘制。预渲染你的东西时，你可以。重绘只有改变，需要更新的东西。
试着写的内存使用效率和垃圾收集友好的代码。

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

提示：请为特征的一些压力测试，你不知道他们是性能杀手，并捕获基准测试结果。

在移动应用中，特别是实时应用程序，所有的优化是，如果它只是一个过度优化还是有点记忆的增益的欢迎没有母校。

欲了解更多信息，请访问以下链接：

http://www.html5rocks.com/en/tutorials/canvas/performance/ （这个绝对应该被访问）
http://www.html5rocks.com/en/features/performance

还搜索性能的文章和教程。

编辑
这的jsfiddle代码片段显示了一些东西盖在这个答案，并提供一个粗略的FPS计数器基准。自己编辑这个小提琴和检查出来。

Answer 2:

根据您所画的东西，与HTML5画布中最常见的性能改进策略是利用层（即多个画布），只更新需要重绘，而不是在每个动画帧上重绘了整个事情的图层。您可以自己推出这样的事情，或者你可以使用类似http://www.concretejs.com/这是一个轻量级的HTML5画布框架，使周边之类的东西碰撞检测，分层缓存，像素比支持，下载等你会做这样的事情：

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// something happens which requires you to redraw layer2, but not layer1...
layer2.sceneCanvas.context.fillStyle = 'red';
layer2.sceneCanvas.context.fillRect(0, 0, 200, 100);

文章来源: Performance problems with HTML5 Canvas in some mobile browsers.