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和带有ICS的Trio Stealth Pro 9.7平板电脑和带有Froyo的LG Optimus V手机的Phonegap Build。我发现了很多提示，但在我的用户体验审查之后，由于页面加载和按钮推送无响应，我的应用程序在Android上被认为是不可接受的。

我必须同意。第一次通过应用程序，根据简单的控制台工具，每个页面加载大约需要3700ms。这是第二次到页面的大约1900ms，这对我来说是可以的。但是，每次重新加载应用程序时，这将重置为3700ms。我只希望每次进行的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的所有来电。
我尽力限制所有String操作，例如concat等我仍在使用+=而不是将数组填满并加入它，因为我发现的数据表明+=实际上更快。
我已经缩小了我的CSS和Javascript。我即将尝试HeadJS延迟加载（并行加载）。
我正在使用FastClick。
就像我上面所说，我已经尝试禁用所有页面转换。
我使用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文件吗？任何帮助将不胜感激！谢谢！

Answer 1

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

Answer 2

您可能需要考虑将所有JS集合放在页面底部。脚本引起的问题是它们阻止了并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。

在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上也是如此。

您可能还希望将一些文件连接在一起并缩小生成的文件。较少的HTTP请求有时可以节省一些加载时间。但要小心在http请求和文件大小之间找到一个好的balace。如果全局文件变得很大，它将反过来成为一个阻止者，特别是如果你准备好在dom上发射大量事件。

Answer 3

尝试的另一件事是尝试使用jQuery Mobile“自定义下载构建器”。摆脱你不需要的功能。

可以使用Phonegap + JQuery Mobile进行最后的微调吗？

3 个答案: