How to speed up JqueryMobile + Phonegap app

Question

I developed a iPhone App with JqueryMobile and Phoenagap. I minified all files with code, deleted unused files, but app is still quite slow. Problem is. If i tap on button transformation will started appdrox. after 1 second. I Would like to do pages transitions more quick.

I also disable unused part od device (Camera, etc,) but is it still slow.

Can anybody help me With this problem?

I testing on iPhone 4g.

Answer 1

Pointers for improving performance

Cache jQuery Objects

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

Consider alternatives to:

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

Changing to display:none is much faster. Maybe just use addClass('hidden') and removeClass('hidden')

Minimize the use of slow jQuery methods O(n^2)

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

The following methods are expensive as well:

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

The process behind these manipulation methods is the following: cleaning the input string, converting the string into a DOM fragment and injecting it into the DOM.

Optimize selectors:

In order of performance:

• id (due to uniqueness)
• tag
• name, class (both require checking attributes of every DOM element)

Get specific, preferably choosing a parent's id to start with:

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

Use the child selector where possible instead of descendant selector:

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

Use find over context:

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

Use .filter() instead of using tag selectors:

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

Memoization:

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 = {};

Answer 2

While Brett Holt's answer provides a lot of great tips for making your app more efficient, I think part of the problem with that delay you're speaking about has to do with the WebKit engine that's rendering your app. There is a built-in delay of ~300ms before a click is registered, to allow for double-click events.

Based on my research, the concensus seems to be to bind to the 'vclick' event rather than 'click'. vclick should fire as soon as you tap on your object.

I use a library I've found called jquery.touchToClick in my app, which automatically handles converting click events over to vclick. This sped up my click events very noticeably. Keep in mind, though, that it might not be the most efficient way of going about solving this problem.

I've also seen alternative libraries to jquery.touchToClick out there, such as LightningTouch, but I have not tried them.