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

Question

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

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).

问题是:

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

为了澄清,该应用程序建立在Node/ ExpressJS/MongoDB

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

Answer 1

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

(全尺寸)

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