Any final fine-tuning that can be done with Phonegap + JQuery Mobile?

Question

I've been all through this site and many others looking for performance tips on JQuery, JQuery Mobile, and Phonegap. I have 8 data-role="page" pages in 1 HTML file and another page in a separate HTML file that loads the Facebook for Phonegap Build plugin files. I'm on JQuery 1.9.1, JQuery Mobile 1.3.0, and Phonegap Build on a Trio Stealth Pro 9.7 tablet w/ ICS and an LG Optimus V phone w/ Froyo. I've found many tips, but after my UX review my app was deemed unacceptable on Android due to unresponsiveness of page loads and button pushes.

I have to agree. The first time through the app, each page load take around 3700ms according to simple console instrumentation. This goes down to around 1900ms the second time to a page, which is OK by me. However, this resets back to the 3700ms every time the app is reloaded. I only wish whatever DOM indexing/searching / JS compiling that was being done each time could be cached or I could interrrupt all the JQuery backend processes because I don't use much of it outside of the UI components. I have disabled AJAX navigation. I've tried disabling page transitions but have found $.mobile.transitionFallbacks.* very helpful and I don't see any benefit from totally disabling transitions. I only use events as an attempt to explicitly turn on and off the Loading icon. I really don't use anything else JQuery Mobile. My DOM size is 1125 objects, though.

If I can't resolve these page loads I'm going to have to go native for both Android and iOS, and I'm not looking forward to the Objective C...

Here's what I've done so far:

1. Page Header load:

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <title>Title</title>
   <link href="jquery-mobile/mine.css" rel="stylesheet" type="text/css"/>
   <link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css"/>
   <script src='jquery-mobile/fastclick.js' type='application/javascript'></script>
   <script src="jquery-mobile/jquery-1.9.1.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   $(document).bind("mobileinit", function(){
       $.mobile.ajaxEnabled = false;
       $.mobile.pushStateEnabled = false;
       $.mobile.touchOverflowEnabled = false;
       $.mobile.defaultPageTransition  = 'slide';
       $.mobile.defaultDialogTransition = 'pop';
       $.mobile.transitionFallbacks.slide = 'none';
       $.mobile.transitionFallbacks.pop = 'none';
       $.mobile.buttonMarkup.hoverDelay = 0;
       $.mobile.phonegapNavigationEnabled = true;
   });
   </script>
   <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
   <script src="jquery-mobile/mine.js" type="text/javascript"></script>
   <script src="phonegap.js"></script>
   

2. I have removed all onClick's in my HTML.

3. I have cached all JQuery calls.

   var $activityCheckboxes = $('#activityCheckboxes');
   

4. I limit JQuery calls to only reference by ID.

5. I have limited all calls to localStorage.

6. I have limited all String operations the best I could, e.g. concat, etc. I still am using += instead of push an array full and joining it because data I found suggested the += was actually faster.

7. I have minify-ed my CSS and Javascript. I'm about to try HeadJS lazy load (parallel load).

8. I'm using FastClick.

9. Like I said above, I've tried disabling all page transitions.

10. I close all events with event.preventDefault(); return false; except pagecreate's.

Here are my events:

$(document).delegate("#page", "pagecreate", function () {
    validateValues();
    validateActivitiesInstructions();
    validateAddNewInstructions();
    updateSettings();
});

$(document).delegate("#page", "pageshow", function () {
    $.mobile.loading('hide');
    event.preventDefault();
    return false;
});

$(document).delegate("#about", "pageshow", function () {
    $.mobile.loading('hide');
    event.preventDefault();
    return false;
});

$(document).delegate("#explanation", "pageshow", function () {
    $.mobile.loading('hide');
    event.preventDefault();
    return false;
});

$(document).delegate("#settings", "pageshow", function () {
    $.mobile.loading('hide');
    event.preventDefault();
    return false;
});

window.addEventListener('load', function () {
    new FastClick(document.body);
    event.preventDefault();
    return false;
}, false);

What else can I do to decrease the initial page load time and possibly increase button responsiveness? Should I split my 8 pages into separate HTML files? Any help would be greatly appreciated! Thanks!

Answer 1

Another thing to try would be experimenting with jQuery Mobile "Custom Download builder". Get rid of the features you don't need.

Answer 2

OK, I've experimented with every permutation I could think of and what I had above and the use of head.js seems to be the absolute best I'm going to do today. Thanks everyone for their help.

Answer 3

You may want to consider placing all of your JS assests at the bottom of the page. The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel.

While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

You may also want to concatenate some of your files together and minify the resulting file. Less HTTP requests can sometimes save you some loading time. But be careful to find a good balace between http requests and file size. If the global file becomes to large it will in turn, itself become a blocker, especially if you are firing a ton of events on dom ready.