Улучшение производительности

Question

Я новичок в AngularJS. Я разработал список, который можно отфильтровать при вводе в поле поиска. фильтр принимает много полей из объекта базы данных и выполняет поиск по всем этим полям (например, имя, идентификатор, комментарии ... и т. д.). Проблема возникает, когда я загружаю весь запрос и заполняю список в угловом методе с помощью команды (push). , так как у меня есть большое количество записей в базе данных, загрузка страницы занимает около 12 секунд, и база данных растет, поэтому на этот раз это будет расти! Я тестировал производительность с использованием временной линии и, как и ожидалось, сценарии занимают очень много времени!

Вот часть моего кода:

Шаблон

<script type="text/javascript"> 

    ngApp.controller('FilterCtrl', function ($scope) { 


     $scope.lines = []; 

     {% for line in lines %} 

      $scope.lines.push 
      ({ 
       id:{{ line.id }}, 
       name: '{{ line.name }}', 
       alias: '{{ line.alias }}', 
       owners: '{{ line.print_owners }}', 
       interested_in: '{{ line.print_interested_in }}', 
       crosses_count: '{{ line.related_crosses_count }}', 
       area: '{{ line.expressions }}', 
      }); 

     {% endfor %}  
    }); 

</script> 

просмотров:

def browse_lines(request): 
    lines = Line.objects.filter(deleted=False).order_by('name') 

    return render_to_response('Browse_Lines.html', 
          {'lines': lines }, 
          context_instance=RequestContext(request)) 

Любой способ повысить производительность и ускорить заполнение списка? спасибо.

Answer 1

Быстрая победа будет остановить толкая вещи в массив один на один

$scope.lines = [ 
{% for line in lines %} 
    { 
     id:{{ line.id }}, 
     name: '{{ line.name }}', 
     alias: '{{ line.alias }}', 
     owners: '{{ line.print_owners }}', 
     interested_in: '{{ line.print_interested_in }}', 
     crosses_count: '{{ line.related_crosses_count }}', 
     area: '{{ line.expressions }}', 
    }, 
{% endfor %}  
]; 

</EndUglyCode> 

Теперь правильный путь было бы сделать отдельный запрос GET для извлечения данных, как вы это необходимо (для которых есть множество угловых примеров вокруг включения на угловую домашнюю страницу).

Pagination бы определенно быть хорошей идеей, но по крайней мере, вы можете склеить начальные результаты, так что вы не возвращаетесь N объектов всего времени,

lines = Line.objects.filter(deleted=False).order_by('name')[:10] 

Если вы действительно чувствуете, что вам нужно верните все строки, тогда вы должны подумать, требуется ли их упорядочение, так как это может составить здоровенный кусок времени.

Answer 2

Невозможно «ускорить».

Лучшим способом было бы разбивать страницы на страницы так, чтобы изначально данные загружались только для первой страницы. Скажем, у вас есть 1000 предметов, разделите их на страницы из 100 предметов каждый. Таким образом, изначально будут загружены только первые 100 предметов. Когда вы переходите на другую страницу, следующие 100 предметов и так далее.

Кроме того, для фильтрации вы должны будете написать конечную точку api, которая будет принимать запрос фильтра и возвращать элементы из базы данных. Затем покажите эти элементы в таблице. Что касается, когда ударить этого API, используйте комбинацию ngChange, ngModel и ngModelOptions (для дребезга), как это:

<input type="text" ng-model="search.query" ng-change="getItems()" ng-model-options="{debounce: 1000}" /> 

Здесь getItems() будет вызываться, когда пользователь в чем-то и ждет 1s (обрабатывается debouce). В этой функции отправьте search.query в api.