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

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 之外还可以进行哪些其他改进？

Please have a look at my performance audit screenshot

Answer 1

在这种情况下，过滤或渲染可能会导致问题。

如果问题出在过滤上，那么您必须使用 rxjs 主题对触发搜索的事件进行去抖，并使用管道运算符对其进行去抖。

如果是渲染就得利用CDK提供的虚拟滚动组件

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

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

How to increase performance of Event: Keydown on Angular?

javascript

performance

angular2-changedetection

angular

angular-reactive-forms