Оптимизация обнаружения изменений Angular

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

Angular периодически запускает механизм обнаружения изменений , чтобы изменения в модели данных отражались в представлении приложения. Обнаружение изменений может быть запущено вручную или через асинхронное событие (например, взаимодействие с пользователем или завершение XHR-запроса).

Обнаружение изменений — мощный инструмент, но если его запускать слишком часто, он может запустить большой объем вычислений и заблокировать основной поток браузера.

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

Обнаружение изменений в Angular изнутри

Чтобы понять, как работает обнаружение изменений в Angular, давайте рассмотрим пример приложения!

Код приложения вы можете найти в этом репозитории GitHub .

Приложение отображает список сотрудников двух отделов компании — отдела продаж и отдела исследований и разработок — и состоит из двух компонентов:

  • AppComponent , который является корневым компонентом приложения, и
  • Два экземпляра EmployeeListComponent : один для продаж и один для НИОКР.