Angular profile Change Detection

Опубликовано в Angular • 03 января 2019 г. • 1 мин. на чтение

Спрева внесите изменения в файл 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)

https://angular-guru.com/blog/angular-unknown-features 8

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

Angular. Редирект по условию

Пример условного перенаправления пользователя в зависимости от некого количества

0 - dashboard
1 - карточка
2 и более - список

DI декораторы Angular

Кратко об декораторах @Self, @SkipSelf, @Host, @Optional. Отличие @Host от @Self

Конфигурируемые модули Angular

Создание модуля с методом forRoot, который принимает объект конфигурации модуля.

Angular routerLink conditionally

<a [routerLink]="myVar ? '/home' : null" routerLinkActive="is-active">Home</a>
or
<a [routerLink]="myVar ? ['/home'] : []">Home</a>

Аналог Jasmine createSpyObj в Jest

// Jest
const serviceMock = {
 methods: jest.fn(),
 you: jest.fn(),
 want: jest.fn(),
 to: jest.fn(),
 mock: jest.fn()
};

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

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