角度變化檢測緩慢

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中，這對性能產生了巨大影響。