如何加速JqueryMobile + Phonegap应用程序

Question

我使用JqueryMobile和Phoenagap开发了一款iPhone应用程序。我对所有文件进行了代码缩小和删除未使用的文件，但是应用程序仍然很慢。问题在于，如果我点击按钮，转换将在大约1秒后开始。我希望页面转换更快。

我还禁用了设备上未使用的部分（相机等），但速度仍然很慢。

有人可以帮我解决这个问题吗？

我正在iPhone 4g上测试。

- redrom

Answer 1

提高性能的指针

缓存jQuery对象

Ex: var header = $('#header');

考虑以下替代方法：

• jQuery.each()
• .show()
• .hide()
• .toggle()

改为使用 display:none 更快。可以考虑使用 addClass('hidden') 和 removeClass('hidden')

尽量减少使用速度较慢的 jQuery 方法，例如 O(n^2) 的：

• remove()
• html()
• empty()

以下方法也比较耗费资源：

• append()
• prepend()
• before()
• after()

这些操作方法的实现过程为：清理输入字符串，将字符串转换为 DOM 片段并注入到 DOM 中。

优化选择器：

按性能顺序：

• id（由于唯一性）
• tag
• name、class（都需要检查每个 DOM 元素的属性）

尽可能具体，最好从父元素的 id 开始选择：

    $('#test p.description').removeClass('hidden');
    instead of 
    $('.description').removeClass('hidden');

尽可能使用子选择器，而不是后代选择器：

    $('div > p').hide(); or $('div').children('p'); 
    instead of
    $('div p').hide(); or $('div').find('p'); 

使用find代替context:

    $('div').find('p');
    instead of
    $('div', 'p');

使用 .filter() 而不是使用标签选择器：

    $('div.name').filter(':input');
    instead of
    $('div.name :input');

记忆化：

var myFunc = function (param) {
    if (!myFunc.cache.hasOwnProperty(param)) {
            var result = {};
            // ... expensive operation ...
            myFunc.cache[param] = result;
    }
    return myFunc.cache[param];
};

// cache storage
myFunc.cache = {};

- Brett H

---

你有什么替代hmtl()和empty()的建议吗？ - Fabrizio

我不建议使用任何替代方案，只是尽量减少使用这些较慢的函数。 - Brett H

Answer 2

虽然Brett Holt的回答提供了很多使应用程序更高效的好方法，但我认为你所说的延迟问题部分原因是渲染应用程序的WebKit引擎。在单击事件注册之前有一个内置的延迟约为 ~300毫秒，以允许双击事件发生。

根据我的研究，普遍意见似乎是绑定到'vclick'事件而不是'click'。当您点击对象时，vclick应该立即触发。

我在我的应用程序中使用了一个我找到的库jquery.touchToClick，它自动处理将click事件转换为vclick。这显着加快了我的点击事件。不过，请记住，这可能不是解决此问题的最有效方法。

我还看到了一些替代jquery.touchToClick的库，例如LightningTouch，但我没有尝试过。

- geeksunny

Answer 3

这对我的情况有所帮助，它减少了悬停延迟，并使触摸屏设备的用户界面更加响应。

$(document).on("mobileinit", function(){
    $.mobile.buttonMarkup.hoverDelay = 0;
});

你也可以禁用过渡效果，但这会使jQueryMobile更快。

$(document).on("mobileinit", function(){
    $.mobile.defaultPageTransition   = 'none';
    $.mobile.defaultDialogTransition = 'none';
});

- kuffel