如何提高Event.Keydown在Angular上的性能？Keydown在Angular上的性能？

Question

我有一个有近70个字段的搜索引擎，当用户试图输入一个文本或选择一个下拉菜单时，问题就会出现。它的速度很慢，渲染时有4-5秒的延迟。

我已经将表单从父组件中分离出来，并将表单组作为输入。

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

在SearchEngineFormComponent里面检测改变设置为。OnPush.

@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[];
}

同时我也是这样管理动态表单的。

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

这个问题在生产模式下似乎并不存在。

请您帮忙了解一下，除了ChangeDetection之外，还有什么可以改进的地方吗？

请看一下我的性能审计截图

Answer 1

在这种情况下，要么是过滤的问题，要么是渲染的问题。

如果是过滤的问题，那么你必须使用rxjs主题来debounce触发搜索的事件，并使用管道操作符debounce它。

如果是渲染的问题，那么你必须利用CDK提供的虚拟滚动组件。

https:/material.angular.iocdkscrollingoverview。