AngularJS действительно медленный при рендеринге с примерно 2000 элементами?

Здесь скрипка: http://jsfiddle.net/D5h7H/7/

Он отображает следующее:

<div ng-repeat="group in Model.Groups">
    <span>{{group.Name}}</span>
    <div ng-repeat="filter in group.Filters">
        <input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
        <select ng-disabled="!filter.enabled">
            <option ng-repeat="value in filter.Values">{{value}}</option>
        </select>
    </div>
</div>

Это список фильтров, загружаемых в json с сервера, а затем визуализированных для пользователя (в примере json генерируется прямо в Fiddle). На данный момент в каждом из 6 групп по 30 фильтров имеется по 15 опционных элементов для каждого фильтра.

В Firefox теперь требуется около 2 секунд для перерисовки пользовательского интерфейса.

Является ли это время нормально для angular js? Есть ли что-то, что я делаю неправильно, что вызвало 2сек. рендеринг (потому что 2000 элементов для меня не выглядят как большое число, но 2сек., безусловно, большой)?

Ответ 1

В AngularJS 1.3+ есть One-time binding встроенный:

Основная цель одноразового обязательного выражения - предоставить способ создать привязку, которая будет отменена и освободит ресурсы один раз связывание стабилизируется. Сокращение числа выражений наблюдаемый делает цикл дайджеста более быстрым и позволяет получить больше информации отображается в то же время.

Чтобы сделать одноразовую привязку, добавьте :: к значению привязки:

<div>{{::name}}</div>

Также см. соответствующие обсуждения:

Ответ 2

Вы должны посмотреть bindonce, если вам не нужно обновлять интерфейс после того, как данные были привязаны к нему. bindonce может также ждать, пока объект будет загружен, а затем выполните привязку. Это сэкономит вам кучу времени и значительно уменьшит ваш $watch() при правильном использовании.

Ответ 3

Это связано с тем, как AngularJS выполняет грязную проверку. Здесь окончательный ответ, чтобы замедлить рендеринг с помощью AngularJS.

Ответ 4

Используя этот проект: angular-vs-repeat повысит вашу производительность.

При этом браузер отобразит (таким образом, angular выполнит свою грязную проверку) только для очень большого количества элементов, которые помещаются в прокручиваемом контейнере, где вы визуализируете элементы. Демо здесь

Ответ 5

Я понимаю, что это старый вопрос, но я не думаю, что ответ уже опубликован.

Я считаю, что причина, по которой ваша форма медленная, состоит не только в том, что у вас есть еще 2000 элементов, но эти элементы являются элементами формы, используя ng-model. Встроенная проверка формы в Angular очень эффективна и удобна, но может вести себя очень медленно, особенно когда вы сначала загружаете форму. Если эти входные элементы 180 (6x30) использовали нечто вроде ng-checked вместо ng-model, избегая механизма проверки формы, тогда вы должны загружать гораздо быстрее.

<input type="checkbox" ng-checked="filter.enabled">{{filter.Name}}

Сокращение наблюдателей с одноразовым привязкой через :: также поможет в этой ситуации, но я думаю, что ваша основная проблема заключается в проверке формы ng-model и Angular.

Ответ 6

Чтобы загрузить около 2000 элементов, вам не нужно отображать их все сразу. Вы можете агрессивно их визуализировать при прокрутке страницы или смене страницы. Обратитесь к этому вопросу

Используйте уникальный идентификатор, такой как идентификатор фильтра, чтобы минимизировать время создания ng-repeat всех доменов. Обратитесь к отслеживанию и дубликатам

Как и в ответе alecxe выше, используйте однократное ограничение, если это вам не подходит, вы можете уменьшить частоту дайджеста с помощью таких ng-model-options="{ debounce: 200 } угловых опций ng-model-options="{ debounce: 200 }

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

Надеюсь это поможет.

ng-repeat="filter in group.Filters | track by:filter.id | limitTo: NumPerOperation"

Ответ 7

Используя эти два angular модуля, вы можете сделать рендеринг ваших таблиц намного быстрее.

"быстро-нг-повтора" https://github.com/allaud/quick-ng-repeat

"бесконечная прокрутка" https://github.com/infinite-scroll/infinite-scroll

Просто имейте в виду, что это не решение для повышения производительности вашего "ng-repeat", это просто другой подход, чтобы ускорить работу ваших таблиц.

Ответ 8

Замените ng-repeat="group in Model.Groups" на collection-repeat="group in Model.Groups".