通过事件发射器进行角度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. 您可以使用绑定来进行组件间通信，而不是事件发射器