Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

When trying to render more than 120 items from an array (with images) the scrolling of the list becomes slower. Basically, when I am loading new data in infinite scroll, I am concatenating old array data with new array data.

On the other hand, popular websites like dribbble, behance dont seem to have this issue. Maybe this issue is specific to Angular.js? Has anyone faced this problem in their projects?

share|improve this question

This question has an open bounty worth +100 reputation from shrbisht ending tomorrow.

This question has not received enough attention.
    
The main point to understand here is you are loading data from server or local ? and if its in local you can use limitTo filter rather than concatination – Vinod Louis Feb 8 at 5:38
    
Perhaps have a look at a directive like ngInfiniteScroll to progressively load the items you need rather than all at once – haxxxton Feb 8 at 5:39
3  
Happened with me when I had a bulky array rendered using ng-repeat but without track by. See if you are missing that – tanmay Feb 8 at 5:53
1  
If you're looking at tips to improve performance, here's a post i've made earlier which talks about some of the things you could try: stackoverflow.com/a/38349146/841804 – Chanthu Feb 8 at 6:01
    
ng-repeat is great but when Array has more than 20-30 elements it become painfully slow. I read somewhere that is because of re-render all items in every update. You could try use one time bindings but it helps only a little. When we bulid Chat App instead of angular ng-repeat We have to use pure JS to list messages. – Dominik Ruczyński Feb 22 at 15:31
up vote 4 down vote

ngInfiniteScroll is just a directive that you can use to implement infinite scrolling and it doesn't affect this problem.

here are some tips to speed up the app

  • Avoid using watchers in repeating section when ever you can

    • Use one time bindings : {{::model}}
    • Decrease using ng-* : all of them add a $watch.
    • Decrease using $watchCollection or $watch
    • Use ng-if instead of ng-show : it removes dom and destroys watchers in.

  • In Concatenating:

    you could see your problem in plunker and next command

        [].push.apply($scope.list,getNewList());

    is better than

        $scope.list=$scope.list.concat(getNewList());

But all above tips lets user have more items in the list but when number of items in the list get more than (let say 1000) the scrolling becomes slow again

For this problem we could use Angular Material md-virtual-repeat which just load visible items on demand as i used in this your problem with virtual repeat.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.