javascript - 可以使用 Phonegap + JQuery Mobile 完成的任何最终微调吗？

Question

我浏览了这个站点和许多其他站点，以寻找有关 JQuery、JQuery Mobile 和 Phonegap 的性能提示。我在 1 个 HTML 文件中有 8 个 data-role="page" 页面，在一个单独的 HTML 文件中有另一个页面加载 Facebook for Phonegap Build 插件文件。我使用的是 JQuery 1.9.1、JQuery Mobile 1.3.0 和 Phonegap，它基于带 ICS 的 Trio Stealth Pro 9.7 平板电脑和带 Froyo 的 LG Optimus V 手机。我找到了很多提示，但在我的用户体验审查之后，由于页面加载和按钮按下无响应，我的应用被认为在 Android 上 Not Acceptable 。

我必须同意。根据简单的控制台检测，第一次通过该应用程序时，每个页面加载大约需要 3700 毫秒。第二次到一个页面时，这会下降到大约 1900 毫秒，这对我来说没问题。但是，每次重新加载应用程序时，这都会重置回 3700 毫秒。我只希望每次都可以缓存任何 DOM 索引/搜索/JS 编译，或者我可以中断所有 JQuery 后端进程，因为我在 UI 组件之外很少使用它。我已禁用 AJAX 导航。我试过禁用页面转换，但发现 $.mobile.transitionFallbacks.* 非常有用，我看不到完全禁用转换有任何好处。我仅将事件用作明确打开和关闭加载图标的尝试。我真的不使用任何其他 JQuery Mobile。不过，我的 DOM 大小是 1125 个对象。

如果我不能解决这些页面加载问题，我将不得不为 Android 和 iOS 使用原生的，我不期待 Objective C...

这是我到目前为止所做的:

1. 页眉加载:

   <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. 我已经删除了我的 HTML 中的所有 onClick。

3. 我已经缓存了所有 JQuery 调用。

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

4. 我将 JQuery 调用限制为仅通过 ID 引用。

5. 我限制了对 localStorage 的所有调用。

6. 我已尽我所能限制所有字符串操作，例如concat 等。我仍在使用 += 而不是将数组推满并加入它，因为我发现的数据表明 += 实际上更快。

7. 我缩小了我的 CSS 和 Javascript。我准备试试 HeadJS 延迟加载(并行加载)。

8. 我正在使用 FastClick。

9. 就像我上面说的，我试过禁用所有页面转换。

10. 我使用 event.preventDefault(); 关闭所有事件；返回 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 文件吗？任何帮助将不胜感激!谢谢!

Answer 1

好吧，我已经尝试了我能想到的每一种排列以及我上面的内容，使用 head.js 似乎是我今天要做的绝对最好的。感谢大家的帮助。