Ускоряем Phonegap

Разрабатываю приложение на стеке технологий PhoneGap и jQueryMobile. Приложение, которое получилось в итоге оказалось не таким быстрым как нативные приложения. Начал искать способы повышения производительности работы приложения. Нашел много интересной информации для себя. Что можно сделать для того, чтобы приложение, написанное при помощи phonegap и jQueryMobile стало работать быстрее.

Что делать для повышения скорости работы приложения

1. Библиотека fastclick. Ускоряем нажатие кнопок

fastclick - библиотека, которая ускоряет нажатие на кнопки в мобильном браузере. Эта библиотека устраняет задержку в 300 мс между физическим нажатием на экран телефона и вызовом события click в мобильных браузерах. Причина такой задержки в мобильных браузерах следующая.

Мобильные браузеры будут ждать около 300 мс с момента, когда вы нажмете кнопку, чтобы инициировать событие click. Причина этого в том, что браузер ждет, чтобы определить, на самом ли деле вы выполняете двойное нажатие.   

2. Отключаем часть CSS

Причиной медленной работы приложения также могут быть тени и круглые углы элементов. Которые мы и отключим.

* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}

Поместите этот код в конец CSS файла.

3. Отключаем градиент

За место CSS градиента лучше использовать заранее сделанные картинки с градиентным фоном

4. Отключаем эффекты jQueryMobile

В методе mobileinit прописать следующий код

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

5. Не используйте много изображений в разных файлах

Не используйте много изображений/значков на одной странице. Скомпонуйте все изображения в одно изображение и используйте CSS спрайт. Как сделать спрайт я написал тут.

Источники

http://stackoverflow.com/questions/19849637/how-to-use-fastclick-js-with-phonegap-and-jqm
http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
http://publish.illinois.edu/weiyang-david/2013/06/05/phonegap-app-problemssuggestions/
https://github.com/ftlabs/fastclick
http://www.codefessions.com/2012/09/creating-native-user-experience-with.html
http://www.codefessions.com/2012/10/improving-performance-of-html5-based.html
http://codedrop.com.au/blog/phonegap-performance-tips
http://therockncoder.blogspot.ru/2012/06/three-quick-performance-tips-for.html
http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/
http://www.tricedesigns.com/
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/8208679/android-performance-jquery-phonegap-issue
http://stackoverflow.com/questions/13904315/android-webview-late-rendering/14010732#14010732
https://groups.google.com/forum/#!topic/phonegap/bv3lLlsgr74
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/