PhoneGap + jQuery Mobile = slow tap response time

Question

I know there are a lot of these questions on the internet, but I've tried every solution (all the answers of this question), and none of them worked.

When I run the site in my PC's browser everything's fine, but as soon as I deploy on the phone, the response time is very laggy.

I've tried using FastClick, setting hoverDelay to 0, and binding my own events, but the result is the same.

Am using Android 4.1. Would appreciate any help other than what I've tried.

Answer 1

To speed up JQM, you have to turn off any transitions.

It sucks, but the JQM transitions are too slow for mobile devices, even on iOS. We'll just have to wait a few years until the hardware gets faster I suspect. This is despite the JQM team trying to improve the performance in 1.2. I still can't use the transitions without my apps feeling sluggish.

I always use these settings to get the best performance out of jQuery mobile.

$.mobile.defaultPageTransition   = 'none'
$.mobile.defaultDialogTransition = 'none'
$.mobile.buttonMarkup.hoverDelay = 0

As well, if you are writing any javascript, do not bind to any 'click' events. Click is way too slow on mobile devices as it has an additional 300ms delay before the event is triggered.

Since you are using JQM, you can use their own click event vclick instead (which under the hood is using touchstart and touchend events).

If it's still really slow for you after that, you might have to examine what is actually happening in your click events - perhaps your code is not as optimised as it could be.

Answer 2

You'd be better off using the tap event than the click event if you want to work around this for a mobile application.

Have a read of Tap vs. Click: Death by Ignorance by John Bender