Question

我创建了一个嵌套的树，可能有1到5000个项目，我能够使它工作但它在显示树之前冻结我的浏览器\加载微调器几秒钟。

如何让它流畅，以便浏览器永远不会冻结？

我怎么知道angularjs何时完成创建或渲染或计算（不确定正确的单词）整个列表，以便我可以删除加载微调器，因为你可以看到范围。$ last won＆＃39;因为我们有嵌套的ng-repeat和相同的范围。$ parent。$ last

这是我创建的plunker，但有演示数据 -

http://plnkr.co/edit/GSZEpHjt5YVxqpg386k5?p=preview

示例数据集 - http://pastebin.com/YggqE2MK

在这个例子中并没有太糟糕，但在我的浏览器中，我的OWN设置中包含所有其他组件的大约4000个项目冻结了超过10秒钟。

我已考虑的内容

使用了bindonce.js库但没有太大成功
使用＆＃34; ::＆＃34;单一绑定再没有太大成功
只加载第一级然后在用户扩展类别时渲染下一级但我的树可以非常随机，也许我只有1个单根节点，有100个子节点
分页不适用于场景

HTML

  <script type="text/ng-template" id="tree_item">
    <div ng-init="category.expanded=true">
      <div ng-class="{'selected': category.ID==selectedCategoryID}">
        <div class="icon icon16" ng-if="category.Children.length>0" ng-click="$parent.category.expanded=!$parent.category.expanded" ng-class="$parent.category.expanded?'col':'exp'"></div>
        <div class="icon icon-category" ng-class="'icon-category-'+category.TypeType" ng-style="{'border-color':category.Colour}" ng-attr-title="{{category.Status?Res['wpOPT_Status'+category.Status]:''}}"></div>
        <a ng-href="#id={{category.ID}}" ng-class="{'pending-text': category.PendingChange}">{{category.Name}}</a>
      </div>
      <ul class="emlist" ng-show="category.expanded">
        <li ng-repeat="category in category.Children | orderBy:'Name'" ng-include="'tree_item'" ng-class="{'selected': category.ID==selectedCategoryID}" e2-tree-item is-selected="category.ID==selectedCategoryID">
        </li>
      </ul>
    </div>
  </script>

  <div id="CategoryListContainer" class="dragmenu-container initial-el-height">
    <div class="spinner" data-ng-show="status=='loading'"></div>
    <ul id="CategoryList" class="dragmenu-list ng-cloak" ng-show="status=='loaded'">
      <li ng-repeat="category in tree | orderBy:'Name'" ng-include="'tree_item'" e2-tree-item is-selected="category.ID==selectedCategoryID"></li>
    </ul>
  </div>

JS

var app = angular.module('recursionDemo', []);

app.controller("TreeController", function($scope, $timeout) {
  $scope.status = "loading";

  $timeout(function() {
        var result = {
      "GetCategoryTreeResult": [{ // too big data set so I pasted it here http://pastebin.com/YggqE2MK }];
    $scope.tree = result.GetCategoryTreeResult;

    $scope.status = "loaded";
  }, 3000);
});

app.directive('e2TreeItem', function($timeout) {
  function link(scope, element, ngModel) {
    scope.$watch('isSelected', function(oldVal, newVal) {
      if (scope.isSelected === true) {
        element.parentsUntil('#CategoryListContainer', 'li').each(function(index, item) {
          angular.element(item).scope().category.expanded = true;
        });
      }
    });

    // not working
    //if (scope.$parent.$last) {
    //  console.log("last has been caught");
    //  var appElement = document.querySelector('[ng-app=recursionDemo]');
    //  angular.element(appElement).scope().status = "loaded";
    //}
  }
  return {
    link: link,
    scope: {
      isSelected: '=?'
    }
  };
});

Answer 1

<强>更新

样本：http://plnkr.co/edit/bHMIU8Mx5grht9nod1CW?p=preview

您可以通过更改app.js的L10901来平滑地加载数据，如下所示。但是你应该注意到，如果你仍然想按名称订购它，并希望它稳定，你应该只对源数据进行排序，但不要用＆＃34;排序＆＃34;排序。（你想要一些代码来对源数据进行排序吗？）

    function getDataGradually(data, childKey, gap, count, updateCb, finishCb) {
        const lastPositon = [];
        const linearData = [];
        const ret = [];


        function getLinearData(arr, position) {
            arr.forEach(function (obj, index) {
                const pos = position.concat([index]);
                if (obj[childKey] && obj[childKey].length) {
                    var children = obj[childKey];
                    obj[childKey] = [];
                    linearData.push({
                        obj,
                        pos
                    });
                    getLinearData(children, pos);
                } else {
                    linearData.push({
                        obj,
                        pos
                    });
                }
            });
        }
        getLinearData(data, []);

        function insertData({
            obj,
            pos
        }) {

            let target = ret;
            pos.forEach(function (i, index) {


                if (index === pos.length - 1) {
                    target[i] = obj;

                } else {
                    target = target[i][childKey];
                }
            });

        }
        let handled = 0;

        function doInsert() {
            let start = handled;
            let end;
            if (handled + count > linearData.length) {
                end = linearData.length;
            } else {
                end = handled + count;
            }
            for (let i = start; i < end; i++) {
                insertData(linearData[i]);
            }
            handled += count;
            if (handled < linearData.length) {
                setTimeout(function () {
                    doInsert();
                    updateCb && updateCb();
                }, gap);
            } else {
                finishCb && finishCb();
            }
        }
        doInsert();



        return ret;
    }

    $scope.tree = getDataGradually(result.GetCategoryTreeResult, "Children", 0, 30, function () {
      $scope.$digest();
    }, function () {
      //finished 
    });
    //$scope.tree = result.GetCategoryTreeResult;
    $scope.status = "loaded";
  }, 3000);

旧回答：

您可以使用$ timeout获取渲染时间。尝试更改app.js的L10901，如下所示。

        $scope.tree = result.GetCategoryTreeResult;
        console.time("A")
        $timeout(function(){
          console.timeEnd("A");
        });
        $scope.status = "loaded";
      }, 3000);

顺便说一下，我得到了＃31; 1931.881ms＆＃34;在我的电脑上。

Answer 2

我处理这个的方式是：

在控制器中：

// Consider results to be my main array, which contains 5000 items
var results = [{ ... }, { ... }, ..., ..., { ... }];

$scope.bindResults = results.slice(0, 5);

// Here you can start loading
$scope.status = "loading";

// Inject $interval in controller
var interval = $interval(function() {
    $scope.bindResults = results.slice(0, $scope.bindResults.length + 5);

    if($scope.bindResults.length >= results.length) {
         $interval.cancel(interval);

        // Here you can end loading
        $scope.status = "loading";
    }
}, 10);

在HTML中：

<span ng-repeat="x in bindResults"></span>

这不会挂断浏览器，并且会每隔10毫秒继续填充数据，您可以根据需要增加该数字。

Answer 3

根据我的经验：

将过滤器逻辑移至JS（不按HTML排序，但之前）
尝试使用ng-repeat
ng-include with ng-repeat表现不佳 - 请阅读此Using ng-repeat with ng-include或此Alternative for ng-include in ng-repeat

这也是旧的，但关于使用ng-repeat Optimizing AngularJS: 1200ms to 35ms

的angularjs性能的好文章

Answer 4

由于您将大数据绑定到HTML，因此内部构建了如此多的观察者。这肯定会降低性能，并且可能会冻结低配置系统。

将此指令创建为元素而不是属性。然后在指令中执行DOM操作。这肯定会解决问题。

如何处理因嵌套ng-repeat而导致的浏览器冻结

4 个答案: