javascript – 当将新数据加载到$scope时,AngularJS应用程序会冻结

这可能是一个难以回答的问题,因为我不确定这里的根本问题是什么,如果有人想看看会很感激.

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

如果您不断向下滚动,使用ngInfiniteScroll和此功能加载更多项目：

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

(我正在使用AngularJS Deckgrid进行磁贴布局,但我尝试禁用它,并且性能没有太大变化.)

如果你继续滚动,在页面上加载约300个项目后,性能开始受到影响,应用程序会在新项目加载到范围时冻结.

我理解也许这只是一个事实,加载所有这些数据会占用大量的页面 – 每加载27个项目(一个infiniteScroll GET调用),加载的数据总重量约为30kb pop,所以在大约300个项目中,范围内有大约900kb的数据.这个数据尽量少(约500行JSON).

问题是：

在$scope中加载大量数据时,AngularJS是否有任何建议,插件,指令或最佳使用方法？

为了澄清,该应用程序构建在Node / Expressjs / MongoDB上

编辑：我已经在两台计算机上检查了这个问题(两者都在OSX上),这个问题在Chrome中比在Safari中更为普遍.在加载数据时,Chrome完全错开,Safari非常流畅,只有当你获得600件物品时才会有任何明显的延迟,即便如此,它也远不及Chrome那么糟糕.

解决方法:

我看了一下AngularJS Batarang的页面,看来你的应用程序在摘要周期中花了很多时间.如果您在UI延迟期间查看Chrome的“时间轴”面板,则可以看到以下内容：

(full size)

大部分时间花在很多“解析HTML”上.一个快速谷歌搜索出现了this Stack Overflow question,其中有一些可能有用的答案;特别是,关于手动字符串连接的小组帖子值得在这里尝试.您还可以考虑通过小批量向作用域添加新项目(可能使用$evalAsync或一些计时器)来尝试将HTML解析的大块分解为更小的块,以查看是否有帮助.