Very Slow Transitions To and From a Page With ~150 ng-repeat Items

Hi there Ionic Team!

We are using the latest release of Ionic with the latest release of Cordova. Our App has a view with a very simple grid (2 columns, just CSS) which is populated with ~150 items using ng-repeat. When a user taps on a grid cell, the page slides to a details view for that item, your standard list/detail pattern.

We are having serious issues with responsiveness on Android and iOS 4. There is a ~2 second delay to transition to the detail view and ~3 seconds back to the grid view. We also have a smaller grid page, with less items, and the transitions are quicker there. So the transition performance seems directly correlated with the number of ng-repeat items in the grid.

Once we remove the Ionic containers, and use straight up ng-animate, the issues goes away so we are fairly sure it’s an Ionic related problem.

Do you have any ideas what could be causing this and if we can do anything to experiment? This is actually a show stopper for us, we’re otherwise really impressed with Ionic but this problem is a real concern.

Cheers!

There are several options that you might want to take a look at.

I had the same problems and no time to research so I simply replaced ng-repeat with jquery :smile: Or you could go “further” and simply use some vanilla JS.

Thanks for the reply but AngularJS is not the problem in this case. Once we removed the Ionic HTML containers (we’re using the nav bar and tab bar), the performance issues went away.

hey,

i have the same issue with less items. i remember that in earlier versions with the same set of data it was far away from the current slow transition. so i also don’t know exactly what the problem might be.

@gozinsa Which version are you using? Are you on the current nightly?

The latest official release, v1.0.0-beta.1 “actinium” not the nightly. Has the latest build addressed this issue?

I’m not sure this part specifically has been adressed in the nightly, but there are constantly improvements being made to the framework so it can’t hurt to try!

You could open up an issue on GitHub for this, but I know the dev’s are currently already working on improvements to ng-repeat performance (e.g. virtual scrolling).

In the meantime, you could opt to implement a directive called Bindonce instead of ng-repeat: https://github.com/Pasvaz/bindonce

This improves performance because it doesn’t tie watchers to every element that is outputted by ng-repeat.

I have done quite some investigation on this subject an ng-repeat performance. (Author of the first link posted here) The best solution is to use React.js to render performance critical stuff (like long lists, tables…etc)

Using React.js I tested and found an imrpovement of 80% (Rendering 6000 items dropped from 2000ms to <400ms) I am about to write up my findings, but will publish them as soon as possible. Meanwhile checkout this solution for React.js with Angular.js

1 Like

Cheers for the suggestion but it’s got nothing to do with ng-repeat performance in our case, it’s ng-repeat + Ionic. We’ve ripped out Ionic and the performance was fine. Thanks for your suggestions, we’ve decided to ditch Ionic for now and use our own navigation transition code.

Hi @gozinsa for the version using your own “navigation transition code” are you still using ui-router or have you also gone back to ngRoute?

Hi, we’re still using a ui-router with angular animations.

Looks like your problems are related to the same issue i have.

I didn’t find a solution to the problem ;(

I’m still a bit unclear as to what actually causes this slowdown if it is in Ionic as @gozinsa says. If it’s not ngRepeat, what particular Ionic-specific implementation would cause this slowdown? And if this slowdown doesn’t occur on vanilla Angular, why have an Ionic specific implementation in the first place?

Coen, all good questions and I’d like to know the answer too. I had a reply from one of the Ionic devs which implied that it was a known, fundamental and complicated issue, but they are working on it.

2 Likes

I too have noticed this and been hunting it down for a while. Its really noticeable when you set animation="none" on the body. With animations off, the pages load much quicker and since the text in the navbar still animates you can see just how far behind it really is. It doesnt even start animating for at least a second after the page has already switched.

NOTE: I do notice it much more on a page with 25+ ng-repeat list items with images in them. It could very well be a combination of ng-repeat and ionic. Next thing I am gonna try is to get rid of ng-repeat and see if it helps.

i had a similar problem , in my case its wasn’t the list
i had 8 modals on a page (means 8 ajax requests) and the page didn’t even started to render until he created the modals, so the solution was simple

  1. move the modals inside the template and load from them from template and not url
  2. its seems the switch page (state.go) wont show any animation and wont load until the controller is fully loaded , so in my case it was combination of loading modals (and creating them) and a list

the simplest solution i came up with is to change parts of the loading of the page to be async ,this way the route change wont wait for it to load

for example :

$scope.init = function(){
  //load you list here
 $http.get(...).then(function(result){
            $scope.items = result.data
        })

 // load your modals / other heavy loading stuff
};    

$timeout(function(){

        $scope.init();

    },300);

i know your going to say that the $http is async , but the router will wait for the execution of that code anyway (for the execute , not the response from server)

i hope its helps.

I had the exact same problem. Crosswalk is your saviour!

I met the same problem.
After capturing the profile, I noticed that the $animate enter and leave method are called for all ng-repeat items.
So I use $animate.enabled(false); to turn off the animation and the performance is improved so much.
The animation in the page transition is still there, I think it’s because it’s achieved by the css animation.

1 Like

Anyone facing the same problem could give disabling angular animations as @twinssbc explained a try.

I’ve been having the same issue with ~50 content heavy (long text, images etc.) ng-repeat items. I’ve tried everything: removing box shadows, using collection repeat, using React to render list, but had no luck; until disabling angular animations by adding $animate.enabled(false); to .run phase of the app, and view transitions became more responsive. I’ve expected it to remove all animations, but all the animations (view transitions, popup and modal animations) still work just fine.

Thanks for the tip @twinssbc. It was a real life saver :smile:

1 Like

Bumping to bring attention to this fix. Disabling $animate brought a huge performance increase on Android. Only side effect was that &.ng-hide-add and &.ng-hide-remove css events no longer triggered.