如何處理，因爲瀏覽器凍結嵌套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操作。 這一定會解決問題。