Angular. Functions & getters в шаблонах
Если в шаблоне Angular компонента использовать метод или getter, то он будет выполняться на каждый цикл механизма обнаружения изменений, что может привести к проблемам с производительностью. Цель обнаружения изменений - выяснить, какие части пользовательского интерфейса необходимо перерисовать. Чтобы определить есть изменение или нет, требуется выполнить функцию и сравнить её с текущим результатом.
Применение ChangeDetectionStrategy.OnPush позволяет локализовать проблему на уровне компонента, но не избавится от неё.
Решение
Есть 2 способа.
- Результат функции присвоить свойству компонента
- Использовать pure pipe (в случае чистых функций можно быть уверенным, что результат не изменился).
Более подробно про pure pipe в материале Faster Angular Applications - Part 2. Pure Pipes, Pure Functions and Memoization или его видеоверсии
Важное замечание
Проблемы с производительностью возникает на большом количестве элементов (несколько тысяч) или на частых перерисовках (realtime графики). Поэтому в большинстве случаев использование методов и getter'ов является адекватным решением.
Небольшое обсуждение такого замечания в twitter
I must say this is a very misleading article. It speaks about a theoretical issue of recalculating the function result, but it fails to mention that this calculation takes virtually no time. Proposed solution burdens you, the developer, with a task to sync state manually. https://t.co/6TIksESnhW
— Alex Inkin (@Waterplea) August 17, 2020