Почему setTimeout в Angular и резко увеличивает производительность во время выполнения?

Question

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

Настройка:

Angular 9.1.0
Все компоненты используют OnPu sh стратегия обнаружения

У меня есть компонент (довольно UI тяжелый с гибким макетом), который инициализируется в * ng для примерно 10 раз на странице. Этот компонент имеет однозначное свойство ввода, из которого он генерирует макет.

Когда я использую:

ngOnChanges(changes: SimpleChanges) {
   if (this.id) {
      this.initComponent(this.id); // this triggers component to be rendered
   }
}

, рендеринг занимает около 5-7 секунд.

Если я использую:

ngOnChanges(changes: SimpleChanges) {
   if (this.itemId) {
          setTimeout(() => {
           this.initComponent(this.itemId ?? 0);
    }, 1);
  }
}

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

Answer 1

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

setTimeout() запланировано в собственном коде. По сути, происходит то, что движок Javascript выходит из нативного кода, нативный код (setTimeout()) отображает пользовательский интерфейс и затем выходит в go обратно в движок Javascript, где он может продолжить обработку.

Следовательно, помещение вашего кода пользовательского интерфейса в setTimeout() дает такой результат.