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

JavaScript/HTML/CSS applications on Android devices - extremely slow(Android 设备上的 JavaScript/HTML/CSS 应用程序 - 速度极慢)

问题描述

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

We are making some JavaScript games. They run perfectly on iPhone and iPad and desktop as well. The biggest problem are Android devices. All tablets we have with Honeycomb OS 3.x (Samsung Tab 10.1, Motorola Xoom, Acer Iconia, etc.) are extremely slow when JavaScript is executed and content is rendered. It is better on 2.x phones, but still far behind Apple devices…

我们尝试使用 div 元素 以及 HTML5 画布 的传统方法，但是即使是简单的弹跳球示例也非常慢(如果您想测试它，访问 http://sie.mautilus.com/canvas).

We tried to use the traditional approach with div element as well as HTML5 canvas, but even simple bouncing ball example is extremely slow (If you want to test it, access http://sie.mautilus.com/canvas).

如果我们在 Android 的调试菜单中禁用 Enable OpenGL Rendering 会稍微好一些，但仍然不能用于广大观众，不是说普通用户不会这样做的事实......

If we disable in the debug menu on Android the Enable OpenGL Rendering it is slightly better, but still not usable for wide audience, not speaking about the fact, that normal user will not do this…

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

This makes the JavaScript based user interface, which is event bit complicated totally unusable on Android…

在我的 Intel 386 机器上以 MS-DOS 运行的简单弹跳球在配备双核 1 GHz Cortex-A9 CPU 的高端平板电脑上无法使用是怎么回事?

How it is that the simple bouncing ball, which was running in MS-DOS on my Intel 386 machine is unusable on high-end tablets with dual-core 1 GHz Cortex-A9 CPUs?

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

问候，钢

推荐答案

你说得对，安卓设备很慢，我遇到了同样的问题，在网上搜索我只找到同意我们的人.

You are correct that it's very slow on android devices, i ran into the same problem and searching the internet I only find people that agree with us.

我做了一些事情来加快速度(尽管它的质量较低).我也只检查了 HTC Sensation 和三星 Galaxy Tab 10.1.我确实认为您需要为不同的手机使用不同的设置.

I did a few things to speed things up (although it comes with lower quality). I also only checked on HTC Sensation and Samsung galaxy tab 10.1. I do think that you will need to use different settings for different phones.

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

另一方面，我没有注意到 android 2 和 4 的性能比 3 快，但这是基于仅使用 3 台设备进行的测试，所以不是硬统计.

On a side not I noticed that android 2 and 4 perform faster then 3, but that is based on testing with just 3 devices, so not hard stats.

我还读到在画布上使用 translate3d 会触发硬件渲染(如果可用)，但我没有检查/确认这一点.

I also read that using translate3d on a canvas will trigger hardware rendering if available, but I havent checked/confirmed this.

一些可能对你有帮助的代码:

Some code that might help you:

<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');

这篇关于Android 设备上的 JavaScript/HTML/CSS 应用程序 - 速度极慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！