javascript - イベント エミッターによる Angular 2 の変更検出は、大量の CPU 時間を消費します

Question

Angular 2 アプリをしばらく使用すると、非常に遅くなることに気付きました。

CPU 時間をプロファイリングしたところ、大量の変更検出が実行されていることがわかりました。

ページ読み込み直後の CPU プロファイル ...

...しばらくページを使用した後のCPUプロファイルと比較。

EventEmitter多くのコンポーネント間で通信するために、さまざまなサービスで多くのことを使用しました。

しばらくテストした後、ウィンドウ スクロール イベントのエミッターが大きな負荷の原因になっているようです。

スクロール イベントを発行せずにページをしばらく使用した後の CPU プロファイル:

サービスの実装は次のとおりです。

@Injectable()
export class WindowService {

  @Output() scrolled$: EventEmitter<WindowScrolled> = new EventEmitter();

  private scrollDebounceTime = 25;

  constructor() {
    this.addEvent(window, 'scroll', this.debounce((event) => {
      this.scrolled$.emit(new WindowScrolled(window.scrollX, window.scrollY));
    }, this.scrollDebounceTime));
  }

  // ... other functions
}

質問

1. 変更検出呼び出しをデバッグして、それらがどこに適用されているかを確認するにはどうすればよいですか?
2. これほど多くの変更検​​出呼び出しが発生する原因として、他に何が考えられるでしょうか?
3. 間違った使い方をしている場合EventEmitter、どうすれば正しく使えますか?

編集 1

さらに、グリッド ツリー コンポーネントを投稿します。変更は、コンポーネントが構築する再帰的なツリー構造によって引き起こされる可能性があるためです。

@Component({
  selector: 'hierarchy-grid-tree',
  moduleId: __moduleName, // use `__moduleName` from System.js for relative styleUrls and templateUrls
  styleUrls : [`hierarchy-grid.css`],
  template: `<div class="flex-container">
    <div class="flex-item" *ngFor="#node of nodes; #i = index" [ngClass]="{'intermediate': node.has()}" [ngStyle]="{'flex-grow': flexGrow(node), 'flex-basis': visRepConf.nodeWidth+'px', 'order': (i+1)}">
      <hierarchy-node [node]="node" [visRepConf]="visRepConf" #hnInstance></hierarchy-node>
      <hierarchy-grid-tree [nodes]="node.children()" [visRepConf]="visRepConf" [show-depth]="showDepth" [curr-depth]="currDepth + 1" *ngIf="(showDepth === -1 || currDepth < depth) && node.has() && !hnInstance.isCollapsed"></hierarchy-grid-tree>
    </div>
  </div>`,
  providers:  [],
  directives: [HierarchyGridTreeComponent, HierarchyNodeComponent]
})
export class HierarchyGridTreeComponent {

  @Input() nodes: Array<Node> = [];

  @Input() visRepConf:VisRepresentationConfig;

  @Input('show-depth') showDepth = -1;

  @Input('curr-depth') currDepth = 1;

  constructor() {

  }

  flexGrow(node) {
    if(node.has()) {
      return node.numChildrenRecursive();
    }
    return 'auto';
  }
}

// see html demo at http://codepen.io/anon/pen/pgqjPP
@Component({
  selector: 'hierarchy-grid',
  moduleId: __moduleName, // use `__moduleName` from System.js for relative styleUrls and templateUrls
  styleUrls : [`hierarchy-grid.css`],
  template: `<div class="color-{{color}}" [ngClass]="{'selects-infra':selectsInfra}" (click)="selectInfra($event)">
    <p *ngIf="showInfraTitle" class="title">{{title}}</p>
    <hierarchy-node *ngIf="external" [node]="external" [visRepConf]="visRepConf"></hierarchy-node>
    <hierarchy-grid-tree [nodes]="nodes" [visRepConf]="visRepConf"></hierarchy-grid-tree>
  </div>`,
  providers:  [],
  directives: [HierarchyGridTreeComponent, HierarchyNodeComponent]
})
export class HierarchyGridComponent implements OnInit, OnChanges {

  @Input('vis-config') visConfig:string = '';

  @Input('infra') infra:Infrastructure;

  @Input('show-external') showExternal:boolean = false;

  @Input('show-infra-title') showInfraTitle:boolean = false;

  @Input('selects-infra') selectsInfra:boolean = false;

  private visRepConf:VisRepresentationConfig;

  private external:ExternalNode;

  private nodes:Array<Node>;

  private color:string;

  private title:string;

  constructor(private nodeSelection:NodeSelectionService) {
  }

  ngOnChanges(changes) {
    if(changes.infra !== undefined && this.infra !== undefined) {
      this.visRepConf = this.infra.visConfig.get(this.visConfig);

      this.nodes = [this.infra.root];

      if(this.showExternal) {
        this.external = this.infra.external;
      }

      this.color = this.infra.color;
      this.title = this.infra.name;
    }
  }

  selectInfra($event) {
    if(this.selectsInfra) {
      this.nodeSelection.infra = this.infra;
    }
  }
}

結果の階層グリッド: