What are common sources of PhoneGap with jQuery Mobile performance issues?

Question

I have an application written using PhoneGap 1.0 and jQuery Mobile 1.0b2 running on iPhone and iPad.

Ever since I started using the framework, I have been plagued by per

Answer 1

jQuery Mobile enforces a delay of roughly 300ms before the JavaScript function is called for buttons 'clicked' on touch devices. This resolves an issue on touch devices where by if the button clicked changes the content underneith it (e.g. a page change), then the click may also be interpreted on that content that replaces the button.

When the user takes their finger off the button after pressing it, a touchend event is called straight away followed closely by a vclick and then a tap event. Then you have the 300ms before the click, mousedown and mouseup events are called.

So if you do any of the following you will get that 300ms delay:

$('#myButton').bind('click', ...
$('#myButton').click( ...

So instead you should bind a vclick or tap event to the button like this (I believe vclick is a bit faster than tap):

$('#myButton').bind('vclick', function(ev) {
    ev.preventDefault();
    //Your code
});

You could also bind to the touchend event, but this can give some undesired effects, but try it out.

The jQuery Mobile Documentation says this... (so my advice is to test vclick or tap on your test device thoroughly):

We recommend using click instead of vclick anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.

A good discussion on this is here: http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile#14737000003088725