Phonegap - cordova is laggy and slow on android and iOS devices

Question

I just now started with my first PhoneGap project using zend studio. But, after i build and deploy it, the application is quite slow. Both on android and iOS. The scrolling is lagging, and if i press a button, it's slow to goto the next page. Is there any way to improve it's performance ? Thanks in advance

Lumber

Answer 1

Since version 4.0.4, there is a known "bug" where if hardware acceleration is on, it will actually slow down screen redraw events. This is why scrolling is slow.

On the Samsung Galaxy III and IV, canvas would not render anything at all until we turned off hardware acceleration. Once we did canvas drawing performed well.

You can turn off hardware acceleration for your webview with this line of code in your app java file:

super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

This may be fixed as of 4.4 (KitKat uses Chromeview rather than webview).

Nietzsche

I had to add "import android.webkit.WebView;" to my app class too, but this successfully built and seems a fraction faster. I'm not sure it's 100% fixed. I agree the issue is not found on Android 4.4 anyway. Thanks Peter. – Hamitic

Hey peter, i faced an issue. There was a page to add images via camera and gallery. But i was not able to take a photo via camera after putting this code super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null); – Imperfect

Answer 2

Yes,you can add fastclick.js file to your html file.

like:

<script src="../fastclick.js"></script>

& refer this documentation to improve your phonegap app.

Pupillary

Answer 3

Several reasons could be the root cause. You should give more info to help you further.

Possible quick and simple solutions. A) disable your page transitions and check the effect.

What kind of operations are you performing on your page? Are you using additional libraries? I am not familiar with Zen studio, but how are ypu building your UI?

The scroll could be slow or lagging if you are scrolling over a list or buttons or links and in each touch the page is triying to react to change to the hover state but it is not fast enough to match the scrolling speed. Once I had that problem and disable the hover state and the scroll speed improved a lot. Double check that in the meantime.

Tape

Answer 4

In Android KitKat you can use DevTools to debug performance of your application. This is a great video to get to grips with the tools: https://developers.google.com/live/shows/840309825

You should experiment with turning off hardware acceleration on the WebView, but would recommend experimenting on Pre-KitKat and KitKat seperately. The KitKatWebView is based on Chrome and as a result has very different performance characteristics.

Hereat

Answer 5

as mentioned, use FastClick to remove the 300ms delay for clicks. you can also use this code to speed up the page transition: $(document).bind("mobileinit", function () { $.mobile.defaultPageTransition = 'none'; });

Moolah