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 performance issues switching between "pages" in the application. After pressing the button, there is a good second pause, sometimes longer, before the transition occurs. I've tried all of the webkit tweaks out there, and I've even waited for upgrades in both frameworks (I started with Phongap 0.95 and jQuery Mobile Alpha 4) and this issue has not been resolved.

I'm using as much "built in" objects as possible (instead of custom button images) and I use my own PNG backgrounds on each screen. The application itself only consists of 3 pages, plus a page that serves as an options screen.

Instead of looking for a specific solution, I'd like to know what are some of the common issues surrounding performance exist when working with PhoneGap and jQuery Mobile for iOS? That way other people can look for a checklist of options when dealing with their own problems

Answer 1

One of the biggest differences between running your jQuery Mobile app in Safari and running it in UIWebView in native iOS is the lack of the Nitro engine. It was introduced in iOS 4.3. It made JavaScript processing about twice as fast in Safari but they failed to build it into native apps or fullscreen cached webapps. As of iOS 5, the Nitro engine was brought to the rest of the platform.
http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

Beyond the Nitro engine, there are other possible performance issues surrounding jQuery Mobile and page transitions. The slower the platform, the more noticeable the flukes are. Sometimes it can manifest as a white flicker between page renderings. Other times, it can manifest as: transition to new screen - flash to previous screen - flash to new screen. These flukes are not consistent and can be hell to try to figure out exactly why it's happening. Newer and faster devices have less of a problem with this so the good news is, over time, this problem will disappear. Build for the future, devices will soon catch up.

That being said, let's also consider performance in terms of how fast users are able to click what they want. Transition quirks are minimized by disabling page transitions. This gives the added benefit of increasing your effective page performance by 500 milliseconds. Page transitions are pretty, but the fact is, they're slow. Performance is a feature. Just turn off the transitions by including this in your custom scripts.

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition="none";
});

Also, (and this goes out to the community at large that might read this)... seriously consider if you need to actually have a native app. Unless you need PhoneGap to access the camera, gyroscopes, or some other piece of hardware support that Safari can't offer, you'll always get better performance by just using the web. I understand the desire to have a presence to have an an "app store" but only 1% of apps are ever discovered and their half life is only a few weeks. Then you have the maintenance nightmare of releasing updates whenever there's an update to the OS. There are a lot of advantages to just releasing only over the web. With a single update, you can have everyone on every platform updated. So, consider the performance of the platform, but also consider the performance of your releases.