Phonegap app running very slow on android

Question

I am making an app for Android using phonegap and jquery mobile. When I use phonegap build and try it on my Galaxy S3 it is very slow and clicks take over a second for anything to happen. I already tried setting the Android SDK version to 14 but that didn't do anything. This is going to be an app that is going to take massive amounts of data from a large server with 50 items being loaded at one time. I heave read around that Phonegap isn't very good for large scale things like this so is there any way to optimize Phonegap for this? or do I just need to just use something else, and if so what is the best thing to use?

Answer 1

For the click issue, checkout fastclick.js (https://github.com/ftlabs/fastclick)

Most mobile webviews have a 300ms click delay to wait for a double click for zooming in on content. Fastclick.js allows you to bypass this.

Additionally for overall performance issues, you should be mindful of the amount of javascript libraries used. I have made a number of application with phonegap that rely heavily on large amounts of external data and found that trimming down on libraries and using my own JS optimized for my exact purposes has worked best.

I use handlebars.js for templating / view display and always use for loops instead of jquery each. There have been studies that show for being up to 1000x faster than each when loading large sets of data. This is because each recursively finds each instance where as for simply iterates through a set of data.

Answer 2

i know this is a bit late but this answer will be for people who are still facing this issue, i faced the same issue a week ago, and ended up finding that the issue wasn't because of:

• hardware acceleration
• SDK version
• nor the phone hardware specs

which might be the reason sometimes for certain cases, but if u're using jquery, then its peopably because when the android application use the Webview, it doesnt handle the JQuery animation very well, which will result a big performance issue, so what you should do is to replace the JQuery animation with CSS3 animation, to help more, if you're using the jquery animate() function to do animation, then you can just add the JQuery.transit library after normal JQuery library, and use the [transit] function instead of the [animate] function. no need to modify parameters, just replace the function name and thats all.

you can find the library in this link: jquery.transit

after using the library you'll notice a huge performance jump, and everything will work smoothly after that.