Производительность Angular 2 и changeDetection (1000 вызовов за 5 секунд)

Question

Так что в основном я новичок в angular 2, и я взял на себя проект для него.

Я обнаружил, что производительность приложения довольно низкая, это очень проблематично.

Я не мог выяснить, что стало причиной низкой производительности. Затем я начал замечать, что много функций вызова ngIf и ngFor. Когда я неожиданно начал регистрироваться с помощью этих функций, я обнаружил, что каждую секунду происходит буквально сотни вызовов.

У меня действительно нет ничего интересного для показа кода, но мне было интересно, должно ли это быть нормально?

Я не вижу ничего плохого в реальном коде. Конечно, результаты для ngFor могут быть сохранены в переменной, но это немного сложнее (и бесполезно?) Сделать то же самое для ngIf. Я читал об changeDetection, но не мог определить, как часто оно должно срабатывать.

Даже не меняя ничего на сайте (просто прокручивая), функций так много.

Answer 1

Да, иногда обнаружение изменений запускается 1000 раз, особенно когда количество манипулирующих элементов DOM велико.

Например: изменение цикла * ngFor над массивом разрушит весь DOM и восстановит его для части списка. Здесь обнаружение изменений должно выполняться каждый раз.

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

1) с использованием trackBy в ваших *ngFor циклах: это значительно повышает производительность, поскольку angular пытается вносить изменения только в измененную / новую часть массива, а не разрушать и восстанавливать снова весь массив.

Вы можете увидеть это в действии здесь: угловые документы

2) Не использовать функции внутри интерполяции строк , как показано ниже:

<div>the selected color is: {{selectedColor()}}</div>

Надеюсь, это поможет.

Answer 2

Мне было интересно, должно ли это быть нормально?

Ответ - да.

Вы привязываете функцию к своему ngIf. Angular должен отследить вашу функцию и отрендерить как можно быстрее условный элемент.

Если у вас ngIf со множеством инструкций, значит, вы делаете что-то не так.

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