Angular大表在搜索时冻结网页

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

充分应用:链接

App on hosting

Answer 1

我看到你在DOM中解析歌曲表以提取歌曲数据-如果你绝对必须将歌曲数据作为HTML表，那么这将起作用，但是如果你可以将歌曲数据保存为数组并将该数组分配给$scope，那么你的代码将更干净。结果，而不是从DOM解析。解析过程也相当缓慢，这意味着页面在加载后几秒钟内没有响应。

我看不出string_value和count_value上的两个ng-change侦听器是如何影响页面上的任何内容的——删除它们会显著加快过滤速度。

除此之外，这里减慢交互的是每次更改过滤器时DOM的修改。只要整个结果表在DOM中并且被修改，它就会很慢，而且我无法想象在一个长列表中显示所有歌曲对用户也有用。我建议在用户体验上做一个改变——切换计数到一个下拉菜单，有100、50、20和10的选项，默认为100。

从输入中删除了ng-change属性，并且最多可以看到100个条目，因此过滤非常快。