Poor performance on android?

ionic-v1
1

Hi there guys,

I’m super new to Ionic and angular as well but i pretty much just threw myself at creating my first little app.

Its an app that shows events for different churches, i load in the events from a mysql database hosted on my desktop atm while developing and im using infiniteload to populate the lists.

And i love it!

However when i test out the app on my android phone (Galaxy S6 Edge, using 5.0.2) im getting some pretty laggy performance between the different views and when scrolling.

I pretty much get no animation between the views since they are lagging from start to end, and scrolling feels like im getting very low FPS.

Does anyone else have this issue, or is there maybe a solution that i dont know about?

Im pretty much using a vanilla setup for reference with the “ionic start myApp sidemenu” command and only 2 additional views.

You can see the app here if you want to take a look: http://78.143.79.22:8100/#/app/ (Only the second and third church actually got any data in it)

2

you could disbale jsScrolling for android devices to get better list performances.
To speed up page transitions --> use the ionicView events like beforeLeave and enter.
Android has problems to make smooth animation, if the content is changing during transition…
Like before transition start --> your request to an API finishes and you are filling the list with data while transitioning. The browser needs to rerender the page every single time.

So before you leave a complex view hide your content --> if you have fully entered the view show the content.
Set a flag in $ionicView.beforeLeave to hide and reset it on $ionicView.enter

1 Like
3

Thanks for the quick answer :smile:

How would i go about disabling jsScrolling just for android?

Also could you give me an example as to how you would hide / show the $ionicView ? (As i mentioned im really green)

4

Hi,

To disable jsScrolling just add overflow-scroll to your ion-content, then the scroll is native.

<ion-content  overflow-scroll="true"></ion-content>

Or if you want to disable jsScrolling for all the app, you can use $ionicConfigProvider

$ionicConfigProvider.scrolling.jsScrolling(false)

For the ion-view, you should read about the $ionicView events in the docs.
I will give you an example, you should stop your database load when view is about to leave, and restart it when view is entered.

Then when your page is transitioning there are no background process during the transition improving your speed.

You should use $ionicView events ($ionicView.loaded, $ionicView.enter, $ionicView.leave, $ionicView.beforeEnter, $ionicView.beforeLeave, $ionicView.afterEnter, $ionicView.afterLeave, $ionicView.unloaded).

Using the steps that bengtler provide, in your controller you put:

  $rootScope.$on( "$ionicView.beforeLeave", function( scopes, states ) {
               //do stop loading here
  });

    $rootScope.$on( "$ionicView.enter", function( scopes, states ) {
               //do restart loading here
    });

Hope it helped!
Regards

1 Like
5

Hi,

Disabling the jsScrolling improved the performance MASSIVLY! Thanks a bunch

Ill try to test out hiding my content tonight, would i simply empty the array that my ng-repeat is going through or would i actually hide the ion-content element / the content within until the view has changed?

1 Like
6

Without some code I can’t see what you’re doing, but if you’re doing some request to an API or some kind of function that is running while your transition is active, I recommend to stop that when you’re in transition.

If that doesn’t help, you can hide or show the view with ng-show attribute.

<ion-view ng-show="isTransition">.....</ion-view>

and in your controller

$scope.isTransition = false;

then you change $scope.isTransition to true or false, in the $ionView events.

7

He gave a link to his app so you can see his code :slight_smile:

1 Like
8

In ChurchCtrl, I don’t understand this:

    var ArrayLength = response.length;
    for(i = 0; i < ArrayLength; i++) {
      $scope.events.push(response[i]);
    };

Why do you push events one by one, try this:

Array.prototype.push.apply($scope.events, response);

Also, are you sure that infinitescroll is not an overkill solution for your needs? How many events will you get at maximum?

Also I don’t understand how your Events service will work with InfiniteScroll.

 nextItems = Events.query({churchId: $stateParams.churchId, eventCount: count});
 ...
 count = count + ArrayLength;

It seems to me that you will always return events from from index 0 which contradicts the purpose of infinitescroll. You probably need 2 params: offset and count

9

I saw that, but I don’t know why I couldn’t connect to it. Maybe is my company proxy idk.

10

Hey thanks for the feedback!

Like i said im super green and therefore i just went with what i could get working, and didnt know you could push the entire array without looping through it.

As for the InfiniteScroll its getting a SQL saying something along theese lines “SELECT * FROM events WHERE churchid = churchId LIMIT 3,eventCount”

And infinite scroll would indeed be the best solution as theese damn churches legit for more then 500 events in their calendar since they put them in 1 year in advance.

11

Its cause its hosted on my personal desktop and my router is apparently super slow, just give it some time and it will show up eventually.

12

Then it’s wrong because 3 is the offset and it is fixed so it means that you’ll return duplicate ones, not additional results to push on existing ones; This is why you need 2 params.

Try to execute the SQL statement manually with different values to see what I mean.