Android performance hit on later versions than 2.3.5 (phonegap/cordova)

Question

Currently I'm developing an Android App with Phonegap/Cordova (2.1.0/2.2.0) , JQ-Mobi(not jQueryMobile), HTML5 and Javascript and CSS3. The App contains 2 native exstensions.

Somehow, when I export my project to a device with the lastest Android version, the app runs so much slower than an 2.3.5 device.

I've tried enabling the HardwareAcceleration and removed all of the box-shadows and other tough to render css3 stuff. Still on a 4.1.1 or 4.0.4 it runs crappy.

I also upgraded to the latest version of Cordova (now 2.2.0) and it doesn't seem to make it better.

Javascript DOM manipulation happens for about 80-90% when the app is started.

The worst performance is in switching panels and scrolling through forms, most of them have some transitions in them. I tested it on a Samsung Galaxy S2 android 2.3.5 and it look fine and performs well. Same device, but 4.0.4 runs crappy. Samsung Galaxy S3 4.1.1 runs even crappier. HTC Flyer P512 with android 3.2.1 runs it how it should be running.

Can anyone help me out here? How do I get this performance up? Any Hint or Tips which I havn't mentioned?

I'd like to add that I don't get the issues on an Iphone 3gs and up to explain that it is definitly an Android problem.

Answer 1

My phonegap apps run smoothly on iOS, but perform extremely poorly on Android. As I understand it this is just because Android is much slower at interpreting JavaScript than iOS.

One thing that can help a lot is cutting down on the use of libraries such as jQuery and JQM. If you want to include them, don't use them where you don't have to.

functions such as jQuery.animate run notoriously slow on Android and you'd be better of iterating over arrays with raw JS rather than using jQuery.each etc. etc.

The problem is not just with graphical rendering, but with the speed at which JavaScript is executed. Although lowering the screen resolution can boost your performance.

Edit

I am trying to get to the bottom of this myself and the only answer I can get is to keep computational operations at a minimal.

• Use libraries sparingly and solve your problems with raw and well written JavaScript when possible
• Keep a small DOM and manipulate it as seldom as possible
• Make use of JavaScript performance enhancing techniques

So it really seems that this is a core performance issue, rather than something that could be solved on the Phonegap layer. As a non-scientific example, the exact same init() function on one of my apps executes in about 1.2 seconds in iPhone 4s on average, while taking a sluggish 5 seconds to complete on my samsung galaxy s3.