对组件的主机文档单击(Angular2)的巨大性能影响

Question

因此，我有一个组件的300实例化，该组件通过host属性定义全局单击事件侦听器：

@Component({
  selector: 'value-edit',
  template: ``,
  host: {
    "(document: click)": "onClickOff($event)",
  },
  changeDetection: ChangeDetectionStrategy.OnPush
)
export class ValueEditComponent {
  onClickOff(globalEvent) {
    // to make sure it doesn't affect performance we keep it EMPTY!
  }
}

我注意到这个极大地影响了性能，在每次点击document之后，它需要大约2-3秒的处理时间。

这是用Chrome制作的JS CPU配置文件的顺序:等待~5秒，单击，等待几秒钟，停止录制。点击是屏幕截图上巨大的绿色栏：

​

​

我尝试过分离这个组件上的更改检测器，甚至是父组件，但这并没有帮助。只需注释掉行"(document: click)": "onClickOff($event)",就可以解决这个问题。

可能是框架或不良使用的问题，但我不知道如何限定这一点或以更好的实践方式解决问题。

柱塞在这里

GitHub在这里发行

Answer 1

解决办法/解决办法

对于角2.0.0 (最终)代码，下面的代码将导致相同的性能问题：

ngAfterViewInit() {
    document.addEventListener('click', evt => this.evtClickHandler)
}

在“区域”之外注册事件应有助于：

constructor(zone: NgZone) {
}

ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
        document.addEventListener('click', evt => this.offClickHandler(evt))
    })
}

解释

性能问题再次发生在我使用Sortablejs库时。在“角”的最终版本之前，情况并非如此，但是由于在本机元素上注册事件而发生了一些变化。

对于sortablejs库，我这样做了：

this.sortedImages = Sortable.create(el, options)

它在拖动元素时导致了非常糟糕的性能：

​

​

解决方案或解决办法如下：

this.zone.runOutsideAngular(() => {
  this.sortedImages = Sortable.create(el, options)
})

注射this.zone的地方是@angular/core/NgZone。这样，库就可以在NgZone之外注册事件侦听器。

我已经发布了关于这个问题的关于GitHub的一个问题，但是它被认为是我在编码上的错误，而不是角度错误。然而，在最新版本(RC -在最后版本之前)之间出现了一些变化。

因此，这可能是一个错误或(最新的)设计，但我没有确认这一点。