Гады Тал, 29 мая 2019 г.
Итак, ваша команда разрабатывала и уже довольно давно знакома с Angular.js, но ваше приложение начинает отставать и работать медленно. Он разряжает аккумулятор вашего ноутбука и вызывает дискомфорт, особенно если вы используете какие-либо движки Maps GL или другие тяжелые клиентские технологии.
Что ж, здесь я столкнулся с теми же проблемами, и я решил провести небольшое исследование, чтобы узнать, как снова сделать мое приложение Angular.js отличным! 🚤🏎⚡️🎢
Вот несколько советов, приемов и шагов, разделенных на несколько ключевых тем, чтобы вы могли проанализировать свои проблемы с пользовательским приложением, решить их и, наконец, ускорить работу вашего приложения:
Тестирование и профилирование
Одной из наиболее важных функций Angular.js является двусторонняя привязка, приложение управляет данными, проверяя переменные на предмет обновления каждые $ дайджест, с помощью наблюдателей angular.js для каждой привязки переменной. наша цель - сократить время $ дайджеста, тем самым сделав приложение намного быстрее.
- Используйте профилировщик Chrome Dev-tool, чтобы определить узкие места в производительности. Вот несколько документов Google, которые помогут вам в этом:
- Https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference
- Https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
- Https://developers.google.com/web/tools/chrome-devtools/speed/get-started
- Проверьте ЦП и память.
- Используйте Батаранг для сравнения ваших наблюдателей.
$digest
должен занимать не более 50 мсек.- Вкладка производительности инструментов разработчика Chrome - анализируйте прослушиватели и использование процессора.
- Ищите и ищите тяжелые функции, которые могут потребовать некоторого времени на вычисление или повторяться. Батаранг может вам в этом помочь.
Приложение - инициализация
- ленивая загрузка - поиск тяжелых компонентов, которые требуют некоторого времени загрузки или имеют тяжелые зависимости - если их не нужно загружать при инициализации приложения, вы всегда можете разделить свои модули и параллельную загрузку с помощью справка пакетов веб-пакетов https://webpack.js.org/guides/code-splitting/
- УДАЛИТЕ неиспользуемые файлы !!! - для уменьшения размера пакета.
Текущая производительность
ng-if
вместоng-show
- Используйте
track by
в директивеng-repeat
- Используйте
$watchCollection
(включает 3-й параметр) (вместо$watch
) - это сохраняет глубокий поиск объекта.
Debounce ng-model, сократит время обновления - ng-model-options="{ debounce: 250 }.
- используйте
<span ng-bind="$ctrl.user"></span>
вместо{{$ctrl.user}}
- Ввести в конфигурацию -
$httpProvider.useApplyAsync(true)
, для лучшей обработки HTTP-запроса с лучшим количеством$digest
- Ввести в config -
$httpProvider.debugInfoEnabled(false)
, отключить отладочную компиляцию только в продакшене. - Используйте
$filter('date')(time,'dd-mm-yyyy'
) вместо{{time | date: 'dd-mm-yyyy'}}
- это в два раза быстрее. - По возможности используйте привязку один раз -
::
нотация, чтобы разрешить одноразовую привязку, проверьте, можно ли использовать с конвейером трансляции font-display: swap;
для отложенной загрузки текста перед пользовательскими шрифтами.- Используйте
Loadash
или собственный Js вместо функции angular core - Свернуть наблюдателей - используйте Батаранг для сравнения ваших наблюдателей.
- По возможности избегайте повторных фильтров и кеширования данных, например вместо Angular.js native
| translate
pipe вы можете использовать пакет angular-translate-onc.
Заключение
Как видите (с расширением batarang), наше время безотказной работы было улучшено с небольшой помощью нашего модуля разделения и отложенной загрузки.
Для наблюдателей и дайджеста мы видим, что, несмотря на небольшое увеличение количества наблюдателей, окончательное время дайджеста сокращается на 75% ( !) и удвоение количества дайджестов за 30 секунд.
Немного поработав, мы повысили скорость работы нашего приложения, и, конечно же, наш продукт стал намного лучше с точки зрения пользовательского опыта.