角度变化检测缓慢

Question

我在一个组件（组件A）中使用了一个大型数组，其中*ngFor具有嵌套的*ngFor。

组件B初始化一个jquery插件，它注册一个文档mousemove事件处理程序，我使用this.zone.runOutsideAngular来初始化插件，我在回调中调用this.ref.detectChanges()，因为我需要更新组件B内的mousemove上的UI。

组件A不是组件B的子组件。

一旦组件A被渲染，变化检测变得非常慢。数组没有改变，我正在使用组件A的ChangeDetectionStrategy.OnPush策略，但是当我在组件B中触发ref.detectChanges()时，{A}会在组件A上调用，我可以看到明显的jank ngDoCheck。

有没有办法告诉angular完全忽略组件A中的大量项目，并允许我在应该更新UI时进行处理？我认为使用mousemove可以提供我需要的内容，但我已尝试从组件A中删除所有ChangeDetectionStrategy.OnPush，并且只要我在组件B中调用@Input()，它仍然会触发{{1}很明显这很慢。

我可以滚动浏览项目列表没有问题，但是当我触发组件B上this.ref.detectChanges()内导致问题的ngDoCheck时。我知道我可以手动更新DOM，但我认为这只是一种解决方法，因为它只会解决mousemove上的jank而不是变化检测的问题很慢。

Answer 1

this.ref.detach()完全从树上移除探测器，应该停止检查。然后，您仍然可以手动调用detectChanges，并reattach将其重新联机。

也许还能去除鼠标移动（rxjs debounceTime（））可能会有所帮助，除非你真的需要跟踪每个鼠标移动？

如果您还没有进一步优化，请将trackBy: yourTrackByFn添加到ngFor（s）。

Answer 2

我已经深究这个问题了。

问题在于嵌套的* ngFor内部组件A我使用子组件来渲染每个子项，这意味着虽然我使用的是ChangeDetectionStrategy.OnPush策略，但它仍然需要对每个项进行ref检查。 / p>

我现在已经将html从子组件直接移动到组件A中，这对性能产生了巨大影响。