如何提高Event: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主题来取消触发搜索的事件，并使用pipe运算符来取消它。

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

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