@dixoNich
frontend developer

Методы оптимизации AngularJS?

Хотелось бы послушать и пообсуждать, кто как ускоряет работу AngularJS на работе с большими данными, со сложными интерфейсами.
Хочется услышать success story, про мелкии оптимизации (про уменьшение количество вотчеров можно опустить)
  • Вопрос задан
  • 1388 просмотров
Пригласить эксперта
Ответы на вопрос 4
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
меньше длительность $digest цикла - выше производительность и отзывчивость системы. Количество ватчеров к слову тут не причем. Только время за которое они все выполняются влияют (у вас может быть один ватчер который делает что-то сложное, и тысяча простых справятся быстрее).

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

При выводе больших часто меняющихся коллекций использую track by (весьма редко на самом деле, только когда DOM часто перерисовывается).

Во вью же все должно быть максимально просто, декларативненько, никаких дико ужасных условий. В целом при грамотной архитектуре проблем с производительностью не много.

Ну и опять же. Никаких преждевременных оптимизаций. Запустите профайлер, найдите узкие места и тогда только думайте.
Ответ написан
uaKorona
@uaKorona
Front-End разработчик
1. Количество вотчеров на странице. Да-да ). Чем их меньше - тем лучше.
2. One-time binding - Если у вас данные используются только для отображения (большие таблицы, например) и не подлежат модификации пользователя.
3. ng-if вместо ng-show
4. Избегайте ng-style. По возможности переносите в директивы и там jQuery.css()
5. Избегайте {{ }}. Используйте вместо этого ng-bind где можно
6. $compileProvider.debugInfoEnabled(false); - хорошо, но не забудьте включить, если у вас есть тесты.
7. Профайлер. Как показывает практика, программисты оптимизируют одно, а тормозит другое.
8. Общий совет - "тяжелую" логику, по возможности, переносите на сервер. Клиент, чем проще тем лучше.
Ответ написан
Комментировать
@xvakin
В моей практике самые большие проблемы с производительностью возникали из-за того, что я забывал делать отмену watch и bind событий при уничтожении директив. Нужно делать scope.$on('$destroy', function() {}); Если такие директивы попадали в большие ng-repeat браузер иногда просто умирал.

Добавлю, что у Angular есть настройка, которая по дефолту делает возможным получать scope из DOM элемента и добавляет классы типа ng-scope, ng-isolated-scope. Это может быть полезно при разработке и тестировании, но для продакш версии лучшее ее отключить, это немного улучшить перфоманс.
myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);


Подробнее: https://docs.angularjs.org/guide/production
Ответ написан
dmitry_pavlov
@dmitry_pavlov
World-class .NET freelance contractor (remotely)
Парочку советов найдете тут - Top 18 Most Common AngularJS Developer Mistakes
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы