Optimizing performance in PhoneGap

PhoneGap is an open-source application framework designed to bridge the gap between multiple mobile development devices. The result is an efficient and simple way to create hybrid mobile apps with a common codebase.

Developers create the HTML, CSS, and JavaScript files, and PhoneGap (powered by Apache Cordova) creates the rest.

One common issue that arises with PhoneGap (and other broad application frameworks) is related to its performance.

Some tips to increase performance include:

Removing (JQuery) animations

Transistions and animiations have a considerable effect an app’s performance. One alternative to JQuery animations is pure CSS animations. By default, 3D CSS animations will be hardware accelerated, but you can force hardware acceleration on 2D animations by adding this CSS rule:

 -webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Ajax loading

Favouring Ajax loading will reduce the stress on the processor. If you prefer otherwise, I suggest using the great HTML5 feature ‘prefetch’ to silently load pages before a user requests them:

link rel="prefetch" href="http://dev.mikamai.com/post/79398725537/using-native-javascript-objects-from-opal" /

Consider some external libraries, but avoid JQueryMobile

JQueryMobile has a bad reputation at the moment. It’s large, bloated and slow, and the documentation isn’t great. An alternative to JQM is Sencha Touch. Unlike JQM, Sencha is not designed to work on both desktop and mobile, which makes the library smaller and more optimized for mobile devices. One thing to note about Sencha is that it is not free, so you should expect initial expenses when developing your app with Sencha.

Note: For a great Sencha + Phonegap guide, see here.

Another useful library I can recommend is FastClick. This will remove the horrible 300ms delay (used to detect double tabs) when pressing a button, following a link, changing pages etc. It will make the application feel a lot smoother.

Leave a Reply