Angular JS在使用ng-repeat遍歷海量數據集時凍結DOM

Question

我目前有一個應用程序，當點擊一個按鈕時，它會發送一個$ http請求並返回一些信息。然後用所述數據更新變量rows和columns。 ng-repeat繼續循環瀏覽我的所有數據。

當我增加數據超過1000個對象時，它完全鎖定了DOM。我如何優化我的代碼，使其不鎖定DOM 有史以來？這一點非常重要，因爲我的用戶需要能夠在數據迭代完成時在頁面上執行操作。我需要假設的解決方案來處理多達10000行。

我的HTML ...

<table> 
    <tr> 
     <th ng-repeat="column in columns | orderBy:columnToSortBy:reverse"> 
      <h6 ng-bind="column.name" ng-click='sortBy(column.name)'></h6> 
      <img src='/static/images/asc.gif' ng-show="orderByAsc"> 
      <img src='/static/images/desc.gif' ng-show="orderByDesc"> 
      <img src='/static/images/bg.gif' ng-show="orderByNothing"> 
     </th> 
    </tr> 
    <tr ng-repeat="row in rows"> 
     <td ng-repeat="(key, value) in row" ng-bind="value"></td> 
    </tr> 
</table> 

這裏是控制器，其中HTML被附加正在創建，追加，並且$compile「編...

mainQueryModule.controller("newQueryController", function($scope, $http, $compile){ 
var results = {columns:[{"type": "STRING", "name": "nk"}, {"type": "STRING", "name": "Bn"}, {"type": "STRING", "name": "Sk"},{"type": "STRING", "name": "ank"}, {"type": "STRING", "name": "Bnk"}, {"type": "STRING", "name": "Skk"}, {"type": "STRING", "name": "Name"}, {"type": "STRING", "name": "Phone"}, {"type": "STRING", "name": "Age"}, {"type": "STRING", "name": "Tank"}, {"type": "STRING", "name": "Bank"}, {"type": "STRING", "name": "Skunk"}], rows:[]}; 
for(index = 0; index < 1000; index++){ 
     results['rows'].push({nk: "select * from faker 100000000000", Bn: 35, Sk: 567, ank: "ank", Bnk: "Bnk", Skk: "Skk", Name: "Erik", Phone: 100000+index, Age: 29+index, Bank: "Big"+index, Tank: 16+index, Skunk: "123"+index}) 
} 

$scope.runQuery = (client_id) => { 
     // $http.post("fakeurl/", {test:123}).then(function(response){ 
     //  console.log(response) 
      $scope.columns = results["columns"]; 
      $scope.columnToSortBy = null; 
      $scope.rows = results["rows"]; 
      $scope.reverse = false; 
      $scope.orderByAsc = false; 
      $scope.orderByDesc = false; 
      $scope.orderByNothing = true; 
     // }) 
} 
}) 

---

根據@Gaurav建議反映變化的更新問題。

Answer 1

你需要做它在angularjs方式如：你的HTML應該是這樣的

<table class='results'> 
    <tr class='results-column-tr'> 
    <th ng-repeat="column in columns"><h6 class='results-column-titles' ng-click='sortBy(column.name)">{{column.name}}</h6><img ng-show='orderByDesc' src='/static/images/asc.gif'><img ng-show='orderByAsc' src='/static/images/desc.gif'><img ng-show='orderByNothing' src='/static/images/bg.gif'> 
    </th> 
    </tr> 
    <tr ng-repeat='row in rows | orderBy:columnToSortBy:reverse'> 
    <td ng-repeat="column in columns" class='results-data' ng-bind='row[column.name]'> 
    </td> 
    </tr> 
</table> 

和控制器

mainQueryModule.controller("newQueryController", function($scope, $http){ 
    var results = {columns:[{"type": "STRING", "name": "nk"}, {"type": "STRING", "name": "Bn"}, {"type": "STRING", "name": "Sk"},{"type": "STRING", "name": "ank"}, {"type": "STRING", "name": "Bnk"}, {"type": "STRING", "name": "Skk"}, {"type": "STRING", "name": "Name"}, {"type": "STRING", "name": "Phone"}, {"type": "STRING", "name": "Age"}, {"type": "STRING", "name": "Tank"}, {"type": "STRING", "name": "Bank"}, {"type": "STRING", "name": "Skunk"}], rows:[]}; 
    for(index = 0; index < 1000; index++){ 
    results['rows'].push({nk: "select * fotm ;ldfg;lkjdopiusergknds;lkbjs;dlfkjoisdug;lkjsdfg;lkjsdfgl;kjsdfg;lkjsdfgl;iusoe[rtuoipejl;ksdjsdjgoupsdgoupieopiutwjsgoji;duiejlds;fgjsdjgdfgsjsdgsdfgjsdgkl", Bn: 35, Sk: 567, ank: "ank", Bnk: "Bnk", Skk: "Skk", Name: "Erik", Phone: 100000+index, Age: 29+index, Bank: "Big"+index, Tank: 16+index, Skunk: "123"+index}) 
    } 
    $scope.columns = results["columns"]; 
    $scope.rows = results["rows"]; 
}); 

不要在jQuery的風格做到這一點。