角度变化检测缓慢

Question

我有一个大型数组，正在使用带有嵌套*ngFor *ngFor的组件（组件A）。

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

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

一旦提供了组件A，更改检测就会变得非常缓慢。 数组不会改变，我现在用的是ChangeDetectionStrategy.OnPush对于组分A的策略，但是当我火ref.detectChanges() B组分内， ngDoCheck被称为组分A，我可以看到一个明显的JANK mousemove 。

有没有一种方法可以告诉angular完全忽略组件A中的大量项目，并让我处理何时应更新UI？ 我以为使用ChangeDetectionStrategy.OnPush会给我我需要的东西，但是我尝试从组件A中删除所有@Input() ，并且this.ref.detectChanges()在组件B中调用this.ref.detectChanges()它仍然会触发ngDoCheck ，这很明显这很慢。

我可以滚动浏览项目列表，没有问题，但是正是当我在组件B上的mousemove内触发detectChanges引起问题。 我知道我可以手动更新DOM，但是我认为这只是一个解决方法，因为它只能解决mousemove上的问题，而不会解决更改检测缓慢的问题。

Answer 1

this.ref.detach()可以从树中完全删除检测器，这应该停止检查。 然后，您仍然可以调用detectChanges手动进行操作，然后reattach使其重新联机。

除非您确实需要跟踪每个mousemove，否则也许还要对mousemoves（rxjs debounceTime（））进行反跳操作可能会有所帮助？

如果还没有进行trackBy: yourTrackByFn一种优化，则将trackBy: yourTrackByFn添加到ngFor。

Answer 2

我已经深究了这个问题。

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

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