phonegap/cordova app is slower compare to PhoneGap Desktop

Question

Recently I just started to build my app by using phonegap/cordova. At the beginning, I downloaded the Phonegap Desktop and carry out the testing on Phonegap Desktop during development phrase. It is powerful and flexible for testing purpose.

When I am going to complete app, I build the app by using cordova CLI, then install the apk file on my actual device. I found that by using , the app is significantly slower than Phonegap Desktop, especially on jquery animate and toggle modal active: ，该应用程序的速度明显比Phonegap Desktop慢，尤其是在对jQuery animate和toggle modal active进行调试时：

// Simple code for toggle dialog modal to active
$("#modal-launcher, #modal-background, #modal-close").click(function () {
        $("#modal-content").css('top', Math.round( $(document).height() - ($("body").innerHeight() / 1.65 ))+'px');
        $("#modal-content,#modal-background").toggleClass("active");
    });



//Simple code for animate list item 
$( '.Class' ).animate({ right:'0px' }, 250);

The speed is same when I just open the app. After I perform some actions to trigger events, I observed the performance is slowing down. For instance I need to wait for few seconds to let dialog prompt out, and the animate become slower as usual. If i restart the app, the performance is become normal again until I repeat same process.

The performance degradation is not just few milliseconds, it is a very significant difference that up to 4 - 6 seconds delay. This would not happen if I switch to Phonegap Desktop, by using . 切换到Phonegap Desktop，则不会发生这种情况。 This make me have no idea about what is going on, as I thought they share the same framework.

I also tried build the app by using and , but I get same result as well. 和来构建应用程序，但是我也得到了相同的结果。 Does anyone has similar experience and has any solution for this issue ?

Answer 1

The speed of the device and the version of webview is the important point. On the desktop you have a lot of power and it is okay to make the first steps there, but then switch to slow devices for testing and test the app also with older android versions. The reason is not the compatibility, the reason is, that older androids are slower.

If the app is running well on slower devices, it will work great on new devices.

Cordova itself and javascript are very fast. There are some mistakes which people make, when they start with cordova development and using jQuery/jQuerymobile:

1. Write clean HTML with a clean structure, try to make the dom simple.

2. Don't query the dom with jquery over and over again. Instead put your selector in a variable, if you use it several times:

 var $selector = $("#myselector); if ($selector.height() > 100){ // do something } 

3. Concatenate jQuery operations:

  $("#myselector).css("active").text("my new text"); 

4. Use find(), next(), parent(), …. If you need to have multiple operations on multiple elements, and the elements are not fare away in the dom, then use find(), next(), parent(), … it is much faster then querying the whole dom.

5. Don't use jQuery for everything. jQuery is great, but a lot of operations can be done with simple javascript.

6. Don't use jQuery-plugins for things that can be done easily with javascript.

7. Make a single-page-html-app and avoid to use multiple html-pages. This is the best way to slow down the speed of your app and to make the development complicate.

8. Use a custom jQuery download and don't include things you don't need.

9. Use tap instead of click.