如何提高事件的性能：Angular 上的 Keydown？

Question

我有一个包含近 70 个字段的搜索引擎，当用户尝试输入文本或 select 下拉菜单时，就会出现问题。 它很慢，渲染延迟为 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 主题对触发搜索的事件进行去抖，并使用 pipe 运算符对其进行去抖。

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

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