JQuery Mobile – PhoneGap – Performance Tuning and Best Practices

  1. Use latest JQuery mobile
  2. Please don’t create multiple traversing requests in JQuery, try to cache the selection request and reuse. But make sure that these
  3. Don’t us JQuery default animations, use css3 animations
  4. Try to avoid wrapping entire contents in an “a” tag. This impact performance badly, especially in scrollable pages. Also avoid too many links in the page, instead that we do that action on click or tap. I know its bad practice in web, but the performance advantage is huge.
  5. Try to avoid long list of contents instead you can use pagination of the content; this will give better scrolling and app performance too. In iOS app some times crashes if page size is more than 5000px(it’s not documented anywhere, but it’s common complaint of iOs developers)
  6. Make sure that all your custom plugins must have auto release memory(ARM) enabled.
  7. Try to move the tedious activities like encryption, Google Map street view to native layer.
  8. Replace all instance of transform3d with transform2d in jquery css files
  9. For iPhone scrolling performance use libraries like iScroll. iScroll will not fit well with older android devices, so try to fall back them to native scrolls
  10. Try to avoid CSS gradients and replace the same with flat non transparent images(if really needed), else true flat colors as in windows phone 8 and ios7
  11. Upgrade Cordova version to 3.2.0, it had better memory management.
  12. Cache the data in local storage if it is really static, otherwise it will create memory burden. Also make sure that this data must be cleared at regular intervals.
  13. Keep the data source/web service minimal as possible as JOSN.parse will break for big data. If you really needed bug data parsing you can try JSON3, but big data processing is not advisable in mobile devices.
  14. Try to use native features like Geo location with help of native plug-in than using native phone gap navigator plugin, as it sometimes give you HTML5 location warning, which make apps behave inconsistent over time and devices.
  15. For HTML Google map implementation, always careful about the memory warning and its proper handing
  16. Make sure that javascript must be validated in atleast chrome and Firefox before deployment, and try avoiding all cases of java script variable undefined Issues.
  17. Make java script script/css optimized as possible
  18. Compress js and css and will make an advantage in compiled binary file size.
  19. Always give touched/clicked effect to every buttons, which give better usability
  20. Always make sure that we are up to date with all frameworks and scripts (say Cordova, JQuery, JQueryMobile etc.)

If you don’t require any JQuery mobile native list view, you can create a custom list view in css, which add more performance.