Android设备上的JavaScript / HTML / CSS应用程序-非常慢

Question

我们正在制作一些JavaScript游戏。 它们可以在iPhone和iPad以及台式机上完美运行。 最大的问题是Android设备。 当执行JavaScript和呈现内容时，我们拥有Honeycomb OS 3.x的所有平板电脑（三星Tab 10.1，Motorola Xoom，Acer Iconia等）都非常慢。 在2.x手机上效果更好，但仍远远落后于Apple设备…

我们尝试将传统方法与div元素以及HTML5 canvas一起使用 ，但即使是简单的弹跳球示例也非常慢（如果要对其进行测试，请访问http://sie.mautilus.com/canvas ）。

如果我们在Android的调试菜单中禁用了“ 启用OpenGL渲染” ，则效果会稍好一些，但仍无法为广大受众使用，更不用说这个事实了，普通用户不会这样做…

这使得基于JavaScript的用户界面（事件事件复杂）在Android上完全无法使用...

在我的Intel 386计算机上的MS-DOS中运行的简单的弹跳球如何在具有双核1 GHz Cortex-A9 CPU的高端平板电脑上无法使用？

另请参阅：
http://code.google.com/p/android/issues/detail?id=17353
http://groups.google.com/group/phonegap/browse_thread/thread/fc13b40165db8a00?pli=1a

问候，STeN

Answer 1

您是正确的，它在android设备上非常慢，我遇到了同样的问题，在互联网上搜索时，我只找到同意我们的人。

我做了一些事情来加快速度（尽管它的质量较低）。 我也只检查了HTC Sensation和Samsung galaxy tab 10.1。 我确实认为您需要为不同的电话使用不同的设置。

1. 设置屏幕尺寸，以便我的手机不会创建更大的画布，然后再次将其缩小。
2. 将场景放大2倍。这会将使用的像素减少一半，因此实际上您有一个较小的画布在整个屏幕上伸展
3. 不要使用clearRect清除整个画布，然后重绘所有内容。 实际上，在弹跳球示例中删除clearRect将显示很多改进。 清除实际变化的区域（球棒和球），然后重新绘制就足够了。

一方面，我没有注意到android 2和android 4的性能要比3更快，但这是基于仅用3个设备进行的测试，而不是硬统计。

我还读到在画布上使用translate3d会触发硬件渲染（如果可用），但是我尚未检查/确认。

一些可以帮助您的代码：

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>


$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)');
$(gameEl).css('-webkit-transform-origin', '0 0');