javascript - 如何提高事件的性能:Angular 上的 Keydown?
问题描述
我有一个包含近 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 之外还可以进行哪些其他改进?
解决方案
在这种情况下,可能是过滤或渲染导致问题。
如果问题出在过滤上,那么您必须使用 rxjs 主题对触发搜索的事件进行去抖动处理,并使用管道运算符对其进行去抖动处理。
如果是渲染,那么你必须利用CDK提供的虚拟滚动组件
推荐阅读
- python - ValueError:遇到意外的 $end - RPLY Parsing
- c# - 如何在同一个数组中返回不同的数据类型?
- ffmpeg - 使用 ffmpeg 将 Logitech C920 视频传输到两个输出:重新编码为 RTMP 流和硬件编码为文件
- python - 有什么方法可以优化使用 pandas 读取 TSV 文件、进行转换并使用 spark 写入表的代码?
- mysql - 获取跨多个表的不同值的计数(MySQL)
- php - 如果用户单击链接并来自不同页面,如何在 php 页面中显示消息
- batch-file - 使用 bat 文件在单独的窗口中打开 dotnet 应用程序
- reactjs - 如何通过redux react js调用一个函数到另一个函数
- android - 在带有滚动视图的 Android 响应式设计屏幕中并使其具有响应性?
- fullcalendar - FullCalendar:弃用警告:提供的值不是可识别的 RFC2822 或 ISO 格式