IONIC framework Mobile Application Performance Issue

Question

We are developing a high profile mobile application for one of our clients using the IONIC framework. We are almost done with the development for this phase. The application seems to be working well when opening in Web/Mobile Browser. However, when we port this into a mobile application using the framework commands the application becomes very slow and gets stuck a lot. This is resulting in a very poor user experience.

I am using the command "ionic run android" to create the APK. Could you please help us with this issue? We are not able to submit the APK for testing with this issue. Is there any configuration that i could use to speed up the application.

Also, I have added a Ionic Loader in most of my pages.The behaviour is very inconsistent (it appears sometimes only). This is also contributing to a poor user experience.

Answer 1

Which Ionic Loader are you using? I was unhappy with the available solutions and ended up rolling my own solution.

What version are you targeting, and what version are you testing with (physical device)?

Here are some performance tips:

1. If targeting < 4.4 and APK size is not an issue then try bundling the crosswalk runtime. It's fairly easy with the ionic cli, you can just do ionic browser add crosswalk to include it. Performance will be better, but APK size will be larger.

2. ionic run android will make an APK, but it is much better to do ionic build android

3. Minify JS and CSS, concat, and strip debug in your gulpfile.js. I've also had slight performance gains using html2js on the templates.

4. Watch out for ng-repeat. Rather use collection-repeat or, if you must use ng-repeat, then make sure you're using the track by feature.

5. Filters can have a negative impact on performance. Use directives where possible.

6. Defer defer defer! $q is your friend and can help give an illusion of speed.

7. Just use plain ol' DOM when you can, not everything needs to be Angular.

8. Use one-time binding where possible. {{ ::thing }} sets the value once and persists it, which means less watchers, which means better performance.

9. Avoid $scope.$apply() as this processes all the things. Use $scope.$digest() instead and it will only be processed from the scope it is called from.

10. Keep your $$watchers to an absolute minimum!

11. Only bundle what you need. Make sure you're including the bare minimum in terms of libraries etc.

12. Don't use jQuery (although this is obvious)

Good luck!

Answer 2

Update 09/17/2015

Cordova's integration with Crosswalk works perfect these days, and is recommended to use in order to test and build the app for Android.

---

Darryn.ten's answer is definitely very detailed and contains many great tips. I would like to add a few things to what mentioned above:

• Crosswalk. That's the main tool for major performance improvement (in Android 4.4 < where it doesn't have the Chromium browser built in). If installing crosswalk using the ionic cli causes errors and bugs (as it almost surely will), download Intel XDK and you can test/debug/build your app from there using Crosswalk very easily.
• One more thing I have witnessed that causes some major performance issue is background images and gradients, i'm still not sure about opacity performance overall but when I have taken out these two the scrolling and transition went super fast.
• Use hardware based css (translate3d) to move stuff around the DOM.

Hybrid apps are still not as we would like them to be, but hopefully it'll go the right way sooner or later.