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:
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>I have removed all onClick's in my HTML.
I have cached all JQuery calls.
var $activityCheckboxes = $('#activityCheckboxes');I limit JQuery calls to only reference by ID.
I have limited all calls to
localStorage.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.I have minify-ed my CSS and Javascript. I'm about to try HeadJS lazy load (parallel load).
I'm using FastClick.
Like I said above, I've tried disabling all page transitions.
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!