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:

$         


        

Answer 1

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 2

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"
});

Answer 3

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.