How to speedup jquery mobile / phonegap?

Question

I have a small web app. Seven pages, 3.6 KB index.html and 855.5 KB total. The only odd thing i have is a database (~500kb) in Javascript with many lines like:

$.data(db,'Aarstraße',['34236:1','34246:2','34270:4','34290:6',...]);

I tested it on iPod/iPhone and Android (HTC Magic) and it is very slow:

Startup

• iPhone: 14 seconds
• Android: 21 seconds

Simple page transition (slide)

• iPhone: 3-4 seconds
• Android: 4-6 seconds

How can I make this fast?

I already removed the box shadow.

Update

I remove the database leaving 444.7KB page total. Now it runs faster on Android. Around the same as one iPhone. It still feels very slow.

Update 2

After this question, I switched to the latest jquery mobile build. It improved the page transitions for slow Android devices to ~2 seconds per transition. Release of Version 1.1 will be mid/late February.

Answer 1

There are a few things you can do:

1. Get to deviceready faster.
2. Minimize your JS code using YUI Compressor
3. Move your script tags to the bottom of the body tag.

As you've already mentioned you've moved the database out of the equation which was probably taking a bulk of the time on startup.

Answer 2

What do you do with jQuery-mobile? It's performance is very poor, you should never call it on elements bigger that required. See this discussion about jquery-mobile for details. It is doing very large number of DOM search operations because it works by modifying the DOM tree. As for my tests, it works too slow even on desktop browser.

Answer 3

Try without transitions. Even with jQuery 1.1, the page transitions can be really flickery and slow on an iPhone.

To drop page transitions globally, just add the following to jqm.glocal.config.js

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