JavaScript/HTML/CSS applications on Android device

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…

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).

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…

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

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?

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

Regards, STeN

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.

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.

set the screensize so my phone doesnt create a bigger canvas and then scale it down again.
scale up the scene by factor 2. This will cut the used pixels in halve, so you have actually a smaller canvas stretched over the full screen
dont use clearRect to clear the entire canvas and then redraw everything. Actually removing the clearRect at your bouncing ball example will show a lot of improvement. Clearing the areas that actually change (bats and ball) and then redraw it will be enough.

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.

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