AngularJS application se fige lors du chargement de nouvelles données à $portée

C'est probablement une question difficile à répondre car je ne suis pas sûr de ce que la racine du problème est ici, vous serais reconnaissant si quelqu'un pouvait jeter un oeil.

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

Si vous continuez de faire défiler vers le bas, plus les éléments sont chargés à l'aide de ngInfiniteScroll et cette fonction:

$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;
                }
            });
        }
    }

(Je suis en utilisant AngularJS Deckgrid pour la disposition des tuiles, mais j'ai essayé de le désactiver et il n'y a pas de grand changement dans la performance.)

Si vous continuez à faire défiler, après que vous obtenez à ~300 objets chargés sur la page de la performance commence à prendre un coup et l'application se fige alors que de nouveaux éléments sont chargés en application.

Je comprends que peut-être c'est juste un fait que le chargement de toutes ces données prend une grosse charge sur la page avec tous les 27 articles chargés dans infiniteScroll GET appel) le poids total du chargement des données est d'environ 30ko un pop, de sorte à environ 300 articles, il y a ~900 ko de données dans le champ. Ces données sont aussi peu que je peux le faire (~500 lignes de JSON).

La question est:

Existe-il des recommandations, des plugins, des directives ou des meilleures pratiques d'utilisation pour AngularJS pour lors du chargement d'un grand nombre de données dans la page $scope?

Pour plus de précisions, l'application est construite sur Node/ExpressJS/MongoDB

EDIT: j'ai vérifié ce problème sur les deux ordinateurs (à la fois sur OSX) et ce problème est BEAUCOUP de plus en plus répandus dans Chrome que dans Safari. Chrome totalement chancelle lors du chargement de données dans les données, Safari est très lisse et n'a d'notable de latence lorsque vous arrivez à plus de 600 articles et même alors, il est loin d'être aussi mauvais que Chrome.

OriginalL'auteur JVG | 2013-12-08