Angular — один из самых популярных фреймворков JavaScript. Эта технология в основном используется для создания быстрых и эффективных веб-приложений.

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

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

Тем не менее, для существующего приложения Angular с высокой сложностью структуры многие из этих правил не могут быть легко применены из-за высокого риска, связанного с с большим бюджетом.

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

Моя оптимальная стратегия оптимизации приложений Angular заключается в уменьшении количества узлов в веб-приложении.

На практике вы можете проверить узлы DOM в браузере Chrome, открыв кран «Chrome DevTools › Мониторинг производительности» (или «Анализатор размера дома») и отслеживать узлы DOM, отображаемые в зависимости от времени. .

Рисунок 1: Мониторинг узлов DOM в Google Chrome: «Монитор производительности»

Очевидно/фактически, вы должны уменьшить DOM-узлы, скрыв ненужный компонент, используя, например, «ngIf» или разбиение на страницы, и отображать их либо по запросу, либо всякий раз, когда они встречаются с вашим окном просмотра, с помощью используя Виртуальную прокрутку, Intersection Observer API и т. д.

В большинстве случаев это поможет уменьшить число прослушивателей событий JS.

Кроме того, очевидно, что рекомендуется запускать функции, запускаемые прослушивателями событий, через runOutsideAngular, что позволяет выйти из зоны Angular и выполнять работу, которая не запускает обнаружение изменений Angular.

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

Поэтому, чтобы преодолеть предыдущую проблему, мы должны использовать Angular DevTools, чтобы профилировать выполнение обнаружения изменений Angular.

Рисунок 2: Профилирование выполнения обнаружения изменений Angular

Заключение

To summarize, Improving the performance of a running complex Angular App represents a challenging task.
In fact, in order to mitigate the risk associated to this work, we have to heavily focus on testing activities.
In addition, we have to keep a high motivation of the team when implementing task. Indeed, i suggest to keep always track of the “before” and “after” changes. Various simple tools could help at this point. In practice, a simple excel table with screenshot could definitely help.

Меня зовут Абдеррахим Исауи. Я являюсь экспертом по Angular в PeakSoft GmbH Germany, где мы помогаем компаниям создавать масштабируемые приложения.

Если вам понравилась эта статья, похлопайте в ладоши или поделитесь ею. Ваша помощь всегда приветствуется.