javascript - Angular 大表在搜索时卡住网页

Question

需要在 HTML 表格上搜索，搜索工作完美，但非常非常慢，并且在加载和搜索时卡住网页。表需要在 HTML 文件中，而不是来自服务器，仅在文件中。如何提高性能？

Angular 代码:

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，而不是从 DOM 解析。解析过程也非常慢，意味着页面在加载后几秒钟内没有响应。

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

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

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