JavaScript/HTML/CSS applications on Android devices - extremely slow

Question

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.

Answer 1

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.

1. set the screensize so my phone doesnt create a bigger canvas and then scale it down again.
2. 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
3. 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');