Angular profile Change Detection

Спрева внесите изменения в файл main.ts

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(ref => {
    const applicationRef = ref.injector.get(ApplicationRef);
    const appComponent = applicationRef.components[0];
    enableDebugTools(appComponent);
  })
  .catch(err => console.log(err));

Обратите внимание на функцию enableDebugTools. Она добавляет объект ng в глобальную область видимости window.

Далее следует в консоли инструментов разработчика вызываеть метод ng.profiler.timeChangeDetection(), который многократно запускает механизм change detection и подсчитывает среднее время.

Откройте консоль (CTRL+SHIFT+I) и выполните команду:

ng.profiler.timeChangeDetection();

P.S. Анализ компонента

ng.probe($0)

Похожие записи

Angular. Manually retry http request

На память. Некоторое время назад я решил достаточно необычную задачу, но в последствии на backend`е переделали логику и код был удалён из проекта.

Angular. Functions & getters в шаблонах

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

13 сентября 2020 г. в Angular