Как увеличить производительность Event: Keydown на Angular?

Question

У меня есть поисковая система с почти 70 полями, и проблема появляется, когда пользователь пытается ввести текст или выбрать раскрывающийся список. Он медленный и рендерится с задержкой 4-5 секунд.

Я отделил форму от родительского компонента и передал группу форм в качестве ввода.

<search-engine-form [searchEngineForm]="searchEngineFormGroup" [fields]="fields"></search-engine-form>

Внутри изменения обнаружения SearchEngineFormComponent установлено значение: OnPu sh.

@Component({
 selector: 'search-engine-form',
 templateUrl: './search-engine-form.component.html',
 styleUrls: ['./search-engine-form.component.scss'],
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchEngineFormComponent implements OnInit {
 @Input() searchEngineForm: FormGroup;
 @Input() fields: SearchEngineFields[];
}

Также я управляю динамической формой c:

<ng-container *ngSwitchCase="'Textfield'">
    <input type="text" [formControlName]="field.reference" class="form-control">
</ng-container>

Эта проблема, похоже, не возникает в рабочем режиме.

Не могли бы вы помочь понять, что другие улучшения могут быть сделаны помимо ChangeDetection?

Пожалуйста, посмотрите на мой скриншот аудита производительности

Answer 1

В этой ситуации проблема может быть вызвана либо фильтрацией, либо рендерингом.

Если проблема заключается в фильтрации, то вы должны отменить событие, которое инициирует поиск, используя rx js Примените тему и отмените ее, используя оператор канала.

Если это рендеринг, вы должны воспользоваться преимуществом компонента виртуальной прокрутки, предоставляемого CDK

https://material.angular.io/cdk/scrolling/overview