Ionic Android app performance issues


#1

As everyone has complained before we are still facing very noticeable performance issues with Android. Transitions, Scrolling, Modal popups everything feels so sluggish.
So far I have tried below things,

  1. Used crosswalk browser plugin ( of course my app size grew to > 25 MB. ugh)
    http://blog.ionic.io/crosswalk-comes-to-ionic/

  2. Disable transitions

$ionicConfigProvider.views.transition(‘none’)

  1. Disable JS scrolling

if (ionic.Platform.isAndroid()) {
$ionicConfigProvider.scrolling.jsScrolling(false);
}

I don’t have any other things to try out. This is really surprising that we don’t have proper way to fix this Android performance issue. Please help!!


Awful Android performance
#2

It is per se android problem. I have seen native android apps stutter also. Even facebook’s native android app is not as smooth as ios version.

The performance of animations etc. depend on the hardware of the phone(s). You cannot have same experience across all the devices unlike ios. Adding crosswalk is not a magic pill as crosswalk also depends on the hardware of the phone for animations etc. If you have a $50 phone and a $300 phone, both might have same OS version but their hardware will differ significantly and hence the performance. I have a Lenovo A6000 phone and facebook’s native android app has crashed or hanged at least 5 times in last one week. It is device’s issue.

This is a tradeoff for cross platform app with less time to develop. If performance in animation etc. is an issue, you are better off developing native app.


#3
  1. on ng-repeat, use track by if possible

  2. don’t disable cache for your views, if possible

  3. use ng-if instead of ng-show and ng-hide, if possible

  4. watch out memory usage (don’t keep variables references you will never use, keep bigger objects in local contexts where they can be garbage collected, listen to $ionicView.leave event and destroy things you’ve created before)

You may want to take a look at some AngularJS related Performance hints too…


#4

@gaurav_ch I know Android market is pretty fragmented. But I am using high end Android phone and latest Android version.

@ffabreti Thanks ! I will try these out. But I believe its not going to improve much. Lets see.

I think its better to go native. We can’t keep applying band-aid fixes.


#5

When in doubt, it’s ngAnimate’s fault. I’ve developed two angular apps, one web and one ionic, and both of them when profiled the CPU typically spends 95% of the time doing unnecessary ngAnimate css computations, generating callbacks/promises/timeouts, etc.

Try adding this in your config block (inject $animateProvider first, obviously). It will make it so you need to have an ‘angular-animated’ class applied to an element for ngAnimate to do its thing, turning it into an opt-in system instead of constantly analyzing every DOM change.

$animateProvider.classNameFilter(/\bangular-animated\b/);

This one change gave me iOS-like performance on my ionic app when built for android. It might cause problems with ion-nav-view’s transitions, I haven’t tested it with ion-nav-view because I implemented my own navigation solution due to ion-nav-view’s completely broken support for child states/views


#6

Consider adding -webkit-transform: translateZ(0) to any transition you use, as it switches GPU instead of CPU to render animation


#7
  1. Go to the setting option

  2. Tap on Apps

  3. Find the misbehaving app from the list (slide the top menu option to All Apps if you can’t find it)

  4. Tap on the App and hit the “Clear Cache ” option

  5. If the App still doesn’t work you can click on “Clear Data”. This will work same as installing and uninstalling an App.

For more hacks please refer to Lenovo A6000 Manual