我注意到我的 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
}
问题
- 如何调试更改检测调用以查看它们应用于何处？
- 还有什么会导致如此多的变更检测调用？
- 如果我用
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;
}
}
}
生成的层次结构网格：
