How to speed up JqueryMobile + Phonegap application

Question

I developed an iPhone app with JqueryMobile and Phoenagap. I minimized all the code files, deleted unused files, but the application is still pretty slow. Problem. If I click on the conversion button, appdrox will be launched. after 1 second. I would like to make page transitions faster.

I also disconnected the unused part od device (Camera, etc.), but still slowly.

Can someone help me with this problem?

I am testing iPhone 4g.

Answer 1

Pointers for better performance

JQuery cache objects

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

Consider the alternatives:

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

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

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

• delete ()
• HTML ()
• empty()

The following methods are also expensive:

• Append ()
• before the name ()
• before()
• after()

The process of these manipulation methods is as follows: cleaning the input string, converting the string into a DOM fragment and entering it into the DOM.

Selector Optimization:

In execution order:

• id (due to uniqueness)
• tag
• name, class (both require verification of the attributes of each DOM element)

To get a specific option, it is preferable to choose a parent identifier to start with:

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

Use the child selector, where possible, instead of the child selector:

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

Use contextual search:

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

Use .filter () instead of using tag selectors:

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

memorization:

 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 contains a lot of great tips for improving the performance of your application, I think that part of the problem with the delay you are talking about is related to the WebKit engine that your application displays. There is a built-in delay of ~ 300 ms before a click is registered so that events can be double-clicked.

Based on my research, consensus seems to be related to the " vclick " event, not the " click ". vclick should fire as soon as you click on your object.

I use the jquery.touchToClick library I found in my application, which automatically handles the conversion of click events to vclick . This greatly accelerated my click events. Keep in mind, however, that this may not be the most effective way to solve this problem.

I also saw alternative jquery.touchToClick libraries there, for example LightningTouch , but I have not tried them.

Answer 3

This helped in my case, it reduces hoverDelay and makes the interface more sensitive to touch devices.

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

You can also turn off transitions, unfortunately, this speeds up jQueryMobile.

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