Угловая большая столовая заморозить веб-страницу во время поиска

Question

Нужно искать по таблице HTML, искать работу отлично, но очень и очень медленно и замораживать веб-страницу при загрузке и поиске. Необходимость таблицы в HTML-файле, а не FROM SERVER, только в файле. Как повысить производительность?

Угловой Код:

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: Link

App on hosting

Answer 1

Я вижу, что вы разбор таблицы песни в DOM, чтобы извлечь данные песни - если вы абсолютно необходимы у вас есть данные песни как таблица HTML, тогда это будет работать, но ваш код будет намного более чистым, если вы сможете сохранить данные песни в виде массива и назначить этот массив на $ scope.result напрямую, а не на синтаксический анализ из th e DOM. Процесс парсинга также довольно медленный и означает, что страница не отвечает в течение нескольких секунд после загрузки.

Я не вижу, как два прослушивателя изменения ng на string_value и count_value влияют на что-либо на странице - их удаление значительно ускоряет фильтрацию.

Кроме того, что замедляет взаимодействие здесь, это модификация DOM при каждом изменении фильтра. Пока вся таблица результатов находится в DOM и будет изменена, она будет медленной, и я не могу представить, что все песни, видимые в одном длинном списке, также полезны для пользователя. Я бы предложил подсчет переключателей UX в раскрывающемся списке с параметрами, например, 100, 50, 20 и 10, и по умолчанию он равен 100.

С атрибутами ng-изменения, удаленными из Входы и максимум 100 записей видимы, фильтрация довольно быстро.