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