数据绑定慢 - Angular 5
Data binding slow - Angular 5
我正在开发一个 Angular 5 应用程序,其中包含一个简单的 HttpClient 请求以从后端获取单个值。
我将从 API 服务收到的数据绑定到 HTML。
(使用 [(ngModel)] )。
来自 API 的响应约为 200 毫秒。
但是在屏幕上显示数据所需的时间约为 3 秒。
我不确定我是否朝着正确的方向前进。发生这种情况的可能性有哪些?
我刚才遇到了同样的问题,这些是我发现的帮助我解决问题的相关内容。
- DOM 添加了很多事件侦听器。特别是,我发现这些事件侦听器已添加到
document
,假设 20 click
侦听器已添加到文档中,因此应用程序中任何地方的每次点击都会调用所有 20 个点击处理程序,并且会导致整个应用程序需要 20 changeDetection
个周期。 (我遇到这个问题是因为我使用的是 css 软件包之一:来自 Bootstrap 的下拉切换)
您可以检查 event listeners
,如下图所示。
- 您的应用程序中呈现了很多组件,例如,您有一个包含 100 个项目的列表,列表中的每个项目本身就是一个组件。现在,当 changeDetection 循环在应用程序中运行时,在某些浏览器事件发生时,将检查整个应用程序以及检查所有 100 个渲染组件中的更改。根据您的应用程序需要 如果您有很多重复组件,您可以将重复组件的
changeDetection
策略更改为 onPush
,这样至少相关组件的所有输入属性都不会检查它们的引用是否未更改。
希望这两个对你的申请有用!
我通过删除 ChangeDetectionStrategy.OnPush
修复了它
对于所有遇到此问题的人,我有一个类似的问题,我正在显示带有输入切换的 table,当我打开输入时 table(10 行8 列)将显示输入 - 没有绑定到它的数据,一次一个。一个人会停顿,然后下一个,下一个......
问题最终是 [(ngModel)]
存在问题,添加后 [ngModelOptions]="{standalone: true}
丢失,一次全部显示。
我正在开发一个 Angular 5 应用程序,其中包含一个简单的 HttpClient 请求以从后端获取单个值。 我将从 API 服务收到的数据绑定到 HTML。 (使用 [(ngModel)] )。 来自 API 的响应约为 200 毫秒。 但是在屏幕上显示数据所需的时间约为 3 秒。 我不确定我是否朝着正确的方向前进。发生这种情况的可能性有哪些?
我刚才遇到了同样的问题,这些是我发现的帮助我解决问题的相关内容。
- DOM 添加了很多事件侦听器。特别是,我发现这些事件侦听器已添加到
document
,假设 20click
侦听器已添加到文档中,因此应用程序中任何地方的每次点击都会调用所有 20 个点击处理程序,并且会导致整个应用程序需要 20changeDetection
个周期。 (我遇到这个问题是因为我使用的是 css 软件包之一:来自 Bootstrap 的下拉切换)
您可以检查 event listeners
,如下图所示。
- 您的应用程序中呈现了很多组件,例如,您有一个包含 100 个项目的列表,列表中的每个项目本身就是一个组件。现在,当 changeDetection 循环在应用程序中运行时,在某些浏览器事件发生时,将检查整个应用程序以及检查所有 100 个渲染组件中的更改。根据您的应用程序需要 如果您有很多重复组件,您可以将重复组件的
changeDetection
策略更改为onPush
,这样至少相关组件的所有输入属性都不会检查它们的引用是否未更改。
希望这两个对你的申请有用!
我通过删除 ChangeDetectionStrategy.OnPush
对于所有遇到此问题的人,我有一个类似的问题,我正在显示带有输入切换的 table,当我打开输入时 table(10 行8 列)将显示输入 - 没有绑定到它的数据,一次一个。一个人会停顿,然后下一个,下一个......
问题最终是 [(ngModel)]
存在问题,添加后 [ngModelOptions]="{standalone: true}
丢失,一次全部显示。