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.

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.

• javascript
• android
• performance
• cordova

4 Answers 4

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 putational 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 plete on my samsung galaxy s3.

The core of the problem is that everything is loaded and running in a single page (execution context), personally, though single page apps (sencha, jqmobile etc) are all the rage, the performance on modern devices does not do the user experience any justice. I would separate the app into different pages, this will significantly reduce the size of the DOM and create separate execution contexts for each new page, meaning that your main page (execution context) is nice and lean (DOM is small).

I had the exact same problem. I asked a similar question and eventually answered it myself here after a tonne of research:

Cordova/Phonegap slow performance with Open Layers on new Tablet, but fine on new phone

I won't repeat the entire answer I gave, but the slow performance on certain Android versions is due to what is essentially a bug in WebView which throttles the CPU support for GPU based processes, but doesn't provide GPU support to pensate.

Kitkat V4.4.3 upwards have this fixed, but older versions such as V4.4.2 which are still being used on some devices still suffer.

You can avoid this by not using WebView at all for the HTML rendering, and instead use Crosswalk. For our project this solved the problem entirely and we now have a smooth running application across all Android versions we're targeting. It's quite trivial to do as well.

https://crosswalk-project/documentation/cordova.html

https://blog.nraboy./2014/10/use-crosswalk-ionic-framework-android-apps/

Try using multithreading and background processing for resource extensive operations.

That worked for me when i had similar problem with one of my apps when it crashes when it runs on versions later than 2.3.3. I never worked with PhoneGap so I'm not sure how you are going to do it.