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;
    }
  }
}

生成的层次结构网格:

Answer 1

1. 停止在服务内部使用事件发射器
2. 您可以使用绑定(bind)代替事件发射器进行组件间通信