AngularJS app freezes when loading in new data to $scope

Question

This is probably a difficult question to answer as I'm not sure what the root problem is here, would appreciate if someone would take a look though.

http://threadfinder.net/search%3FnameTags=jacket/0

If you continually scroll down, more items are loaded in using ngInfiniteScroll and this function:

$scope.moreProducts = function() {
        if ($scope.busy || $scope.noMore){return;}
        else 
        if (!($scope.busy)) {
            $scope.busy = true;
            $scope.itemsLoaded += 27;
            var theQuery = $routeParams.query.replace(/\?|%3f/gi, '');
            $scope.itemSearch.get({
                query: theQuery,
                page: $scope.itemsLoaded
            }, function(data) {
                if (data.posts.length <= 0) {
                    $scope.noMore = true;
                } else {
                    $scope.noMore = false;
                    for (var i = 0; i < data.posts.length; i++) {
                        if ($scope.user) {
                            if (!($scope.user.likes.indexOf(data.posts[i]._id) === -1)) {
                                data.posts[i].liked = 'http://i.imgur.com/CcqoATE.png';
                            } else {
                                data.posts[i].liked = 'http://i.imgur.com/tEf77In.png';
                            }
                            $scope.posts.push(data.posts[i]);
                        }
                    }
                    $scope.busy = false;
                }
            });
        }
    }

(I'm using AngularJS Deckgrid for the tile layout, but I've tried disabling it and there is no big change in performance.)

If you keep scrolling, after you get to ~300 items loaded on the page performance starts to take a hit and the app freezes while new items are being loaded into scope.

I understand that perhaps it's just a fact that loading in all this data takes a big load on the page - with every 27 items loaded in (one infiniteScroll GET call) the total weight of the data being loaded in is about 30kb a pop, so at around 300 items there's ~900kb of data in scope. This data is as little as I can make it (~500 lines of JSON).

The question is:

Are there any recommendations, plugins, directives or best-use practices for AngularJS for when loading a lot of data in the page $scope?

For clarification, the app is built on Node/ExpressJS/MongoDB

EDIT: I've checked out this issue on two computers (both on OSX) and this issue is MUCH more prevalent in Chrome than in Safari. Chrome totally staggers when loading in the data, Safari is really smooth and only has any noticable lag when you get to 600+ items and even then it's nowhere near as bad as Chrome.

Community · Accepted Answer · 2017-05-23 11:45:39Z

6

I took a look at the page with AngularJS Batarang, and it doesn't appear that your app is spending a lot of time in the digest cycle. If you take a look at Chrome's "Timeline" panel during the periods of UI lag, you can see the following:

Timeline

(full size)

Most of the time is spent in lots of "Parse HTML." A quick Google searched turned up this Stack Overflow question, which has some answers that may be useful; in particular, the Groups post about manual string concatenation by be worth trying here. You may also consider trying to break up the big block of HTML parses into smaller chunks by adding new items to the scope in small batches (perhaps using $evalAsync or a few timers) to see if that helps.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Dec 8, 2013 at 7:47

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JVG Over a year ago

Interesting. Any ideas on how I can turn off data-binding for the elements once they're loaded onto the page? There's no search filter in place and there are only one or two bits of each item in the ng-repeat that need to be watched for binding data changes (just the icons at the bottom of each item plus the little heart that shows the number of 'likes'). No idea where to start with this but think it could be a big performance booster.

Michelle Tilley Over a year ago

@Jascination You might take a look at the setRepeat directive from the linked post, though I'm not sure if that's actually where your performance hits are coming from. We're doing something very similar, also using ngInfiniteScroll, and we have a slight delay when DOM is added but nothing as serious as what you're seeing; I'm also not seeing as many "Parse HTML" events when we add data to the scope.

Collectives™ on Stack Overflow

AngularJS app freezes when loading in new data to $scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related