От автора: AngularJS – JS фреймворк с открытым исходным кодом, разработанный и поддерживаемый google. Инструмент дает все необходимое для создания и управления динамическими front end страницами для веб-приложения. Модульный подход к веб-дизайну и огромное поддерживающее сообщество делают AngularJS популярным среди профессиональных разработчиков. На деле, на AngularJS работают некоторые из наиболее нагруженных сайтов в сети, в том числе google и Virgin America. Это руководство служит как Angular введение и содержит советы по повышению производительности AngularJS.
Что такое AngularJS?
AngularJS создан для упрощения сложных процессов создания и управления JS приложениями. В основе лежит структура MVC, что делает фреймворк особенно полезным для создания одностраничных сайтов. Библиотека основана на обычном JS и HTML, поэтому AngularJS автоматически заботится о манипуляциях с DOM и AJAX запросах, которые в противном случае разработчикам пришлось бы писать самим. Инструмент предоставляет модульные строительные блоки кода JS, которые можно совмещать и тестировать. AngularJS можно быстро добавить на любую HTML страницу с помощью простого тега.
Плюсы и минусы AngularJS
Что выделяет AngularJS среди конкурентов:
Упрощенная двусторонняя привязка данных. AngularJS позволяет привязывать данные к HTML с помощью выражений, а директивы AngularJS позволяют разработчикам расширять функционал HTML и создавать новые конструкции. Манипуляции с DOM и код привязки данных обернуты в простые элементы, которые можно быстро и просто вставить в HTML шаблоны.
AngularJS спроектирован универсальным фреймворком, поэтому с его помощью можно создать веб-приложение почти любого типа. Если вы создаете одностраничное веб-приложение, лучше способа не найти.
AngularJS входит в пакет ПО MEAN, который также включает MongoDB, Express.js и Node.js. Поэтому он позволяет управлять front end и back end проекта с помощью JS. В качестве альтернативы можно использовать для back end Ruby on Rails. С AngularJS также хорошо стыкуется ASP.NET и C#.
AngularJS построен по технике functionality-first, поэтому фреймворк больше всего подходит для разработки сверху вниз. Модульная концепция AngularJS позволяет упростить разделение работы на разные команды в крупных проектах. В приоритете минимальное количество кода, поэтому приложения AngularJS, как правило, компактные и легкие в редактировании.
Тем не менее, есть моменты, которые необходимо знать при выборе AngularJS для своего проекта.
Первое и самое главное, AngularJS очень «упрямый» и навязывает свою структуру разработчикам. Для новичков и даже профи разработчиков это хорошая новость. AngularJS спроектирован максимально user friendly, поэтому его инструменты интуитивно понятны. Однако разработчикам, помешанным на гибкости, придется искать обходные пути.
Для некоторых проектов AngularJS чересчур излишен. В таких случаях больше подойдут более легкие фреймворки типа Backbone.js для статических сайтов. AngularJS также не приспособлен обрабатывать манипуляции с DOM с большим количеством данных, так как полагается на «грязные проверки» для управления изменениями DOM (любое изменение переменных влечет обновление DOM). Для большинства сайтов это не будет проблемой, но GUI редакторы и видео игры могут лагать.
AngularJS также не поддерживает высоконагруженные галереи фото, поэтому инстаграм написан на другом фреймворке. Подобные проблемы с производительностью можно нивелировать через формы с высоким уровнем пользовательского взаимодействия. По крайней мере, Gmail написан на них.
Советы по оптимизации AngularJS
В AngularJS множество встроенных инструментов оптимизации, но это не избавляет фреймворк от жалоб на производительность. Если у вас нет массивной инфраструктуры, как у google, вам, скорее всего, придется использовать лучшие практики для повышения производительности приложений на AngularJS.
Неважно, знаете вы, что вам необходим прирост производительности, или вы просто хотите знать, что можно улучшить, вот несколько советов по ускорению приложений на AngularJS:
1. Следите за дайджест циклом
Дайджест цикл приложения AngularJS – хороший индикатор его производительности. Представьте дайджест цикл, как цикл, который проверяет наличие изменений в переменных. Чем короче дайджест цикл, тем быстрее приложение работает.
2. Сократите количество отслеживаний
Каждый раз при вводе привязки данных вы создаете все больше переменных $$watchers и $scopes, что удлиняет дайджест цикл. Слишком много $$watchers могут вызывать лаги. Поэтому используйте их по минимуму.
3. По возможности используйте одноразовые привязки
Если вы работаете со старой версией AngularJS, вы можете воспользоваться преимуществом одноразовой привязки. Для этого просто добавьте двоеточие перед значением. При правильном использовании значение будет разрешено один раз, после чего оно исчезнет из списка отслеживания. Важно отметить, что функция одноразовой привязки, представленная в AngularJS 1.3, недоступна в AngularJS 4.0.
4. Используйте scope.$evalAsync
Если вручную пытаться активировать дайджест цикл, когда он уже запущен, можно получить ошибку. Чтобы этого не было, используйте scope.$evalAsync вместо $apply, когда необходимо инициализировать дайджест цикл. Операции станут в очередь на выполнение в конец текущего цикла без создания нового цикла.
5. Используйте панель разработчика Chrome CPU Profiler и Timeline
С помощью Profiler и Timeline можно найти узкие места в производительности, чтобы локализовать усилия по оптимизации. Читайте наше полное руководство на Chrome DevTools.
6. Ограничьте доступ к DOM
Доступ к DOM можно дорого обходиться, поэтому сохраняйте маленький размер деревьев DOM. Не изменяйте DOM без реальной на то необходимости и не устанавливайте инлайновые стили. Это запускает рефлоу JS.
7. Удалите CSS классы и директивы комментариев
При создании директивы ее можно назначить на элемент, атрибут, CSS класс и комментарий. Если вам не нужен CSS класс и директивы комментариев, удалите их для повышения производительности.
8. Отключите данные об отладке
Инструменты Batarang и Protractor полагаются на данные о привязке и областях видимости, которые AngularJS прикрепляет к DOM элементам. Поэтому после окончания отладки отключите дополнительные данные, чтобы они не тянули приложение.
9. Используйте Lodash
Lodash позволяет быстро переписывать логику приложения для улучшения встроенных методов AngularJS и повышения производительности. Если ваше приложение не использует Lodash, методы можно переписать вручную на чистом JS.
10. Используйте ng-if или ng-switch вместо ng-show
Директива ng-show просто включает или выключает CSS display для заданного элемента. Для удаления элемента из DOM необходимо использовать ng-if или ng-switch.
11. По возможности избегайте ng-repeat
Злоупотребление ng-repeat может значительно занизить производительность приложения. К счастью, есть альтернативы. Например, вместо использования ng-repeat для рендера глобальной навигации можно самому с помощью провайдера $interpolate рендерить шаблон на объект перед его конвертацией в узел DOM.
12. Используйте $watchCollection
Когда используете $watch – 2 параметра хорошо, 3 уже много. Третий параметр вынуждает AngularJS запускать глубокую проверку, что съедает много ресурсов. Разработчики придумали обходной путь $watchCollection. Он ведет себя как третий параметр для $watch и проверяет лишь первый слой всех свойств объекта. Поэтому он не замедляет проект.
13. Используйте $cacheFactory
Если вам необходим хранить данные, которые затем необходимо пересчитывать, используйте директиву $cacheFactory. Она работает подобно любому другому методу запоминания.
14. Используйте console.time
Если у вас проблемы с отладкой, console.time (Chrome DevTools) – отличный инструмент измерения времени выполнения и производительности.
15. Замедлите обновление ng-model
Замедление обновления полей ввода с помощью директивы ng-model может уменьшить дайджест цикл. Например, ng-model-options=”{debounce:200}” запускает дайджест цикл не чаще раза в 200ms.
16. Используйте $filter
AngularJS запускает фильтры DOM дважды в каждом дайджест цикле: сперва для обнаружения изменений, потом для обновления измененных значений. Провайдер $filter позволяет предварительно обрабатывать данные перед отправкой их в представление, тем самым пропускается парсинг DOM, что экономит время.
17. Жестко следите за областями видимости
Не давайте переменным слишком большую область видимости, чтобы сборщик мусора JS могу высвободить немного памяти.
18. Постраничная навигация или бесконечный скрол
Если ничего не помогло, можно уменьшить количество зацикливаемых элементов с помощью постраничной навигации или бесконечного скрола. В AngularJS для этого даже есть директива ngInfiniteScroll.
Лучше использовать лучшие практики с самого начала, а не возвращаться и все переделывать. Перед тем как сесть кодить, хорошо подумайте, как можно ограничить привязки, наблюдатели и затратные директивы типа ng-repeat. Решение проблем и помощь ищите в официальной документации AngularJS.
Производительность AngularJS и инструменты тестирования
В сети можно найти множество инструментов для улучшения и тестирования производительности приложений на AngularJS. Парочка лучших:
1. Protractor
Protractor создала команда Angular. Это ПО позволяет запускать автоматизированные комплексные тесты. Protractor построен поверх webDriverJS и Selenium, поэтому он может похвастаться всеми их функциями. В том числе и Selenium grid – функция запуска тестов в нескольких браузерах. Тест сьюты можно написать на Jasmine или Mocha.
2. WebDriverIO
WebDriverIO – реализация W3C webDriver API, но более гибкая, чем WebDriverJS. Его командная строка позволяет настраивать тесты даже людям, не знакомым с программированием. WebDriverIO отлично поддерживается и имеет активное сообщество разработчиков.
3. NightwatchJS
NightwatchJS – кастомная реализация W3C webdriver API. Инструмент простой в расширении и кастомизации. В комплекте идет собственный фреймворк для тестирования и механизмы проверок. Поддержка хуже чем у WebDriverIO и Protractor.
4. TestingWhiz
Команды Dynamic позволяют TestingWhiz синхронизироваться с разным серверным временем ожидания для точного комплексного тестирования приложений Angular. В TestingWhiz не нужно писать код, что делает инструмент крайне популярным среди не программистов.
5. Batarang
Batarang – расширение на Chrome от команды Angular для упрощения процесса отладки. В нем есть пара полезных функций, но в основном используется для отслеживания тестов производительности.
Повышение производительности AngularJS – постоянный процесс
В конце также посоветую использовать CDN для ускорения файлов AngularJS. Благодаря умному кэшированию, это оптимизирует время загрузки для посетителей по всему земному шару. Если у вас нет CDN, на которую можно перекинуть файлы AngularJS, вот вам Angular CDN и используйте наши open source ссылки для ускорения доставки.
Сейчас есть множество JS фреймворков, однако AngularJS остается любимым для многих. Поэтому в ближайшее время он никуда не уйдет. Чтобы по максимуму выжимать из своего приложения, оптимизацию AngularJS необходимо сделать привычкой. Хорошо настроенная производительность приложения позволит выводить больше контента с меньшим количеством кода, что высвобождает ресурсы, которые можно потратить в другом месте.
Источник: //www.keycdn.com/
Редакция: Команда webformyself.
