我已经浏览了这个站点和许多其他站点，以寻找有关 JQuery、JQuery Mobile 和 Phonegap 的性能提示。我data-role="page"在 1 个 HTML 文件中有 8 个页面，在一个单独的 HTML 文件中有另一个页面，用于加载 Facebook for Phonegap Build 插件文件。我在带 ICS 的 Trio Stealth Pro 9.7 平板电脑和带 Froyo 的 LG Optimus V 手机上使用 JQuery 1.9.1、JQuery Mobile 1.3.0 和 Phonegap Build。我发现了很多提示，但是在我的 UX 审查之后，由于页面加载和按钮推送的无响应性，我的应用程序在 Android 上被认为是不可接受的。
我不得不同意。第一次通过应用程序，根据简单的控制台检测，每个页面加载大约需要 3700 毫秒。第二次到一个页面时，这会下降到大约 1900 毫秒，这对我来说是可以的。但是，每次重新加载应用程序时，这都会重置为 3700 毫秒。我只希望每次执行的任何 DOM 索引/搜索/JS 编译都可以被缓存，或者我可以中断所有 JQuery 后端进程，因为我在 UI 组件之外使用的不多。我已禁用 AJAX 导航。我尝试禁用页面转换，但发现$.mobile.transitionFallbacks.*非常有帮助，我认为完全禁用转换没有任何好处。我只使用事件来尝试显式打开和关闭加载图标。我真的不使用其他任何 JQuery Mobile。不过，我的 DOM 大小是 1125 个对象。
如果我无法解决这些页面加载问题，我将不得不为 Android 和 iOS 提供原生支持，而且我不期待 Objective C ......
这是我到目前为止所做的：
页眉加载：
<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>我已经删除了我的 HTML 中的所有 onClick。
我已经缓存了所有 JQuery 调用。
var $activityCheckboxes = $('#activityCheckboxes');我将 JQuery 调用限制为仅按 ID 引用。
我已将所有呼叫限制为
localStorage.我已经尽可能地限制了所有字符串操作，例如 concat 等。我仍然使用
+=而不是将数组推满并加入它，因为我发现的数据表明它+=实际上更快。我已经缩小了我的 CSS 和 Javascript。我即将尝试 HeadJS 延迟加载（并行加载）。
我正在使用快速点击。
就像我上面说的，我尝试禁用所有页面转换。
我关闭了
event.preventDefault(); return false;除 pagecreate 之外的所有事件。
以下是我的活动：
$(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);
我还能做些什么来减少初始页面加载时间并可能提高按钮响应能力？我应该将我的 8 个页面拆分为单独的 HTML 文件吗？任何帮助将不胜感激！谢谢！