角度大表凍結網頁，同時搜索

Question

需要在HTML表格上搜索，完美搜索工作，但非常非常緩慢，並加載和搜索時凍結網頁。表格需要在HTML文件中，而不是從服務器，只在文件中。如何提高性能？

角碼：

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

app.controller('FilterTable', ['$scope', function($scope) { 
    $scope.result = []; 
    $scope.basic_table = false; 
    $scope.result_table = true; 
    $scope.ishidden = false; 
    $scope.totalDisplayed = 20; 

    $scope.loadMore = function() { 
     $scope.totalDisplayed += 20; 
    }; 

    $scope.init = function(event, table_id) { 


     var target = angular.element('#' + table_id); 
     angular.forEach(target.children()[1].children, function(tr) { 
      entry = []; 
      angular.forEach(tr.children, function(td) { 
       entry.push(td.innerHTML); 
      }); 
      $scope.result.push(entry); 



     }) 
     target.innerHTML = '' 
    }; 

    $scope.search = function(event, table_id) { 

     var dataValue = event.target.attributes.id.value; 

    }; 

    $scope.filter_count = function(event, table_id) { 
     $scope.ishidden = true; 
     if($scope.count_value) { 
      $scope.basic_table = false; 
      $scope.result_table = true; 
     } 

     if($scope.string_value) { 
      $scope.basic_table = false; 
      $scope.result_table = true; 
     } 



     else { 
      $scope.basic_table = false; 
      $scope.result_table = true; 
     } 


     $scpopearray_length = $scope.result.length; 
     $scope.ishidden = false; 
    }; 
}]); 

app.filter('returnCount', function() { 
    return function (item, count_value) { 
     return item.slice(0, count_value); 
}; 

}); 

全部應用： Link

App on hosting

Answer 1

我看你解析歌曲表在DOM提取歌曲數據 - 如果你絕對要將歌曲數據作爲HTML表格，那麼這將起作用，但是如果您可以將歌曲數據保存爲數組並將該數組直接分配給$ scope.result，而不是從第e DOM。解析過程也很慢，並且意味着加載後幾秒鐘內頁面沒有響應。

我無法看到string_value和count_value上的兩個ng-change偵聽器如何影響頁面上的任何內容 - 刪除它們顯着加速了過濾。

除此之外，這裏減慢交互的速度是每次更改過濾器時的DOM修改。只要整個結果表在DOM中並且被修改，它就會很慢，我無法想象在一個長列表中看到所有歌曲對用戶來說都是有用的。我建議用戶體驗更改 - 切換計數爲下拉式選項，例如選項爲100,50,20和10，默認爲100.

將ng-change屬性從輸入和最多100個條目可見，過濾非常快。