如何处理，因为浏览器冻结嵌套NG-重复

Question

我创建了一个嵌套的树，可能有1 - 5000项，我能够使它发挥作用，但它只是显示之前冻结我的浏览器\正在加载的旋转几秒钟树。

我怎样才能使它平滑，因此浏览器将永远定格？

我怎么能知道什么时候angularjs完成创建或渲染或计算（不知道正确的字），整个列表，这样我可以删除加载微调的话，你可以看到的范围。最后$将无法正常工作我们已经嵌套NG重复和同为范围$父$最后

这里是plunker我创建，但与演示数据 - 。

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

实例Da taset - http://pastebin.com/YggqE2MK

在这个例子中这不是太糟糕，但是在我的浏览器冻结了10秒以上，我的OWN设置中有大约4000个项目与所有其他组件。

我已经考虑

• 使用bindonce.js库，但不使用“::”单一的结合不是很成功很成功
• 再次
• 只加载第一级然后渲染一个新的水平当用户展开一个类别，但我的树可以很随意，也许我只是有数百个子节点1个单根节点
• 分页是不理想的情况下

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

UPDATE：

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

您可以通过更改app.js的L10901如下顺利加载数据。但是，你应该注意到，如果你仍然想通过名字来订购，并希望它稳定，你应该只对源数据进行排序，但在角度不排序与“排序依据”。（你想一些代码源数据进行排序？）

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

老答案：

您可以通过使用$超时得到渲染时间。尝试更改app.js的L10901，如下所示。

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

顺便说一句，我在我的电脑上得到了“1931.881ms”。

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-重复使用跟踪由
• NG-包括与NG-重复有糟糕的表现 - 阅读本Using ng-repeat with ng-include或本Alternative for ng-include in ng-repeat

而且这是旧的，但良好的文章中，关于NG-重复angularjs性能Optimizing AngularJS: 1200ms to 35ms

Answer 4

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

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