Android设备上的JavaScript / HTML / CSS应用程序 - 速度极慢

时间:2012-01-25 09:19:28

标签: javascript android css html5 html5-canvas

我们正在制作一些JavaScript游戏。它们在iPhone,iPad和桌面上也能完美运行。最大的问题是Android设备。我们使用Honeycomb OS 3.x(Samsung Tab 10.1,Motorola Xoom,Acer Iconia等)的所有平板电脑在执行JavaScript并呈现内容时都非常慢。它在2.x手机上更好,但仍远远落后于Apple设备......

我们尝试将传统方法与 div元素以及 HTML5画布一起使用,但即使是简单的弹跳球示例也非常慢(如果您想测试它,访问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

此致 斯登

1 个答案:

答案 0 :(得分:2)

你是正确的,它在Android设备上非常慢,我遇到了同样的问题并在网上搜索我只找到了同意我们的人。

我做了一些事情来加快速度(虽然质量较低)。我也只检查了HTC Sensation和三星galaxy tab 10.1。我认为你需要为不同的手机使用不同的设置。

  1. 设置屏幕尺寸,这样我的手机就不会创建更大的画布,然后再缩小它。
  2. 按系数2放大场景。这会将使用过的像素减半,因此实际上在整个屏幕上显示的是较小的画布
  3. 不要使用clearRect清除整个画布,然后重绘所有内容。实际上,在弹跳球示例中移除clearRect将显示出很多改进。清除实际变化的区域(蝙蝠和球),然后重绘它就足够了。
  4. 另一方面,我没有注意到android 2和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');