how to speed up phonegap jquery mobile page changes

Question

I'm currently working with a developer in the early stages of a relatively straightforward data capture iPad app using Phone Gap. From a UI functionally, the app is essentially:-

• 5 data capture "pages"
• Navigator bar across the top with 5 selectors referring to each of the pages
• When you load the app, you're on page 1 and a swipe to the left introduces a normal slide animation and moves you to page 2, etc etc
• When you click on one of the selectors, it introduces the slide animation and moves you to that page
• The pages have simple data entry fields and images and sliders etc - for the purpose of this test, we have even removed all of these and just put a single placeholder field on each page.

The key issue we are struggling to get over at the moment is that whenever you move to another page (by swiping or selecting on the navigator), there is a 1-2 sec delay before the transition kicks in and new page comes. This 1-2 sec delay is present even if we remove images from the pages. We want to get this delay down to <0.5 sec and/or for it to "feel" more like a native app, in terms of moving around the pages.

From a technical level, this is what the application consists of:-

• JQM 1.2.0
• Various jQuery versions upto 1.8.2
• Web 2.0 (HTML5, CSS3, jScript)
• WebKit
• Currently using single file with multi-pages (however have tried multiple pages and it makes no difference)
• Hardware Accelerated, WebKit Tweaks, Simultaneous Transitions
• Numerous JQM & jQuery plugins

We are new to PhoneGap and iOS app development. We're continuing to research ways to try and get over this speed delay and would like to know:-

1. Has anyone developed an app like this and managed to get the page switching / swiping to happen smoothly and near-natively? (and most definitely less than 1 sec delay)
2. Are there any reliable tips / avenues to explore in order to significantly improve the page switching speed?
3. Does anyone feel strongly that what we're seeing is probably the best you can get when developing with PhoneGap and if so, is there an alternative which also uses mainly web technologies, doesn't require Xcode knowledge, and is more visually performant than this?

I would be grateful for any tips and insight anyone can provide on this because if there is no way forward on fixing this delay and sluggishness, we may need to abandon Phone Gap and look at a native solution which will not be a straightforward option in our situation. Many many thanks in advance for your support on my first ever post to stack overflow!

Answer 1

jQuery Mobile adds a 300ms delay by default to tap events - it's listening for things like double-taps and swipes. If you are not using any of these types of events, consider incorporating FastClick (available on this thread) which has solved my speed issues in my PhoneGap/jQueryMobile app.

Answer 2

My personal opinion here. I have not had much luck with trying to make jQuery mobile feel native. I use a framework called App-UI for handeling page transitions and as a basic framework for my app (this framework is super light weight). Then I design the UI with pure CSS. (this causes the app to feel more native - try to handel transitions using CSS3).

https://github.com/triceam/app-UI

This requires other dependencies which include:

• jQuery - http://jquery.com/
• jQuery Animate Enhanced - https://github.com/benbarnett/jQuery-Animate-Enhanced
• iScroll 4 - http://cubiq.org/iscroll-4
• NoClickDelay - http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

Again, this is my own opinion. This is what has worked best for me when developing mobile app that feel native.