PhoneGap games, canvas and slow javascript

Question

So I built what I hoped would become a simple android game. I first built a web version to getting it working (http://scolvin.com/ballgame) then moved it to PhoneGap and used accelerometers to control the game. The only problem (and it's a show stopping problem) is that the result is horrifically slow (updates i guess about once a second instead of ever 20ms ish).

Is this just how slow phonegap is, with no current solution? Or is there some golden bullet I'm missing?

The game uses easeljs and box2d-web.

What's odd is it seems to run at a reasonable speed on android chrome, but very slow on android's "browser" (which I seem to recall is based on firefox?) and in phonegap which presumably uses the same html renderer/js interrupter.

I've tried simplifying the game, getting rid of as much as i can, using setInterval rather than accelerometer.watchAcceleration all to no avail.

Answer 1

It's a problem of the Android Browser

See the following answer:

Sencha Touch 2 - Android Performance

(It's for Sencha Touch, but i think the main points of the answer are the same)

Answer 2

Instead of using setInterval() for FPS thing, you must use requestAnimationFrame() It is far more efficient

iOS 5+ and Android 3+ use hardware acceleration for Canvas, so you will need atleast those devices for solid performance. Anything before iOS 5.0 and Android 3.0 will use CPU using software-rendering.

So need to keep that in mind