angular2-infinite-scroll 和 ng-for trackBy 函数

Question

我正在使用 angular2-infinite-scroll 结合 trackBy ng-for 函数。我注意到非常奇怪的行为，我无法理解。我在我的 trackBy 函数中放置了 console.log 语句，我注意到当我滚动时，日志被执行了数百次。

这是我关心的事情，我找不到任何相关信息 behavior.Here 是一个例子：

https://plnkr.co/edit/k3YduRtqyXd0TNoPXwiQ?p=preview

//our root app component
import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  styles: [`
    .search-results {
      height: 100%;
      // overflow: scroll;
    }
    .title {
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,.5);
      color: white;
      width: 100%;
    }
    .title small {
      color: #eaeaea;
    }
  `],
  template: `
    <h1 class="title well">{{ title }} <small>items: {{sum}}</small></h1>
    <div class="search-results"
         infinite-scroll
         [infiniteScrollDistance]="scrollDistance"
         [infiniteScrollThrottle]="throttle"
         (scrolled)="onScrollDown()">
      <p *ngFor="let i of array; trackBy: test">
        {{ i }}
      </p>
    </div>
  `
})
export class AppComponent {
  array = [];
  sum = 100;
  throttle = 300;
  scrollDistance = 1;
  title = 'Hello InfiniteScroll v0.2.8, Ng2 Final';

  constructor() {
    this.addItems(0, this.sum)
  }
  test(index, test){
    console.log('test');
  }
  addItems(startIndex, endIndex) {
    for (let i = 0; i < this.sum; ++i) {
      this.array.push([i, ' ', this.generateWord()].join(''));
    }
  }
  onScrollDown () {
    console.log('scrolled!!');

    // add another 20 items
    const start = this.sum;
    this.sum += 20;
    this.addItems(start, this.sum);
  }

  generateWord() {
    return chance.word();
  }
}

如有任何解释，我将不胜感激。

Answer 1

我想我找到了答案：在 Angular 2 应用程序中，zone.js 基本上 polyfills/overrides 本机函数，如 addEventListener、setTimeout 等

当使用 addEventListener 函数添加事件侦听器时，它们会在 zone.js 中注册并有效地用于检测应用程序内部的变化。这很可能会导致性能问题。参考：https://www.bountysource.com/issues/34114696-event-listeners-should-be-registered-outside-angular。

另外订阅scroll事件和.addEventListener('scroll')一样，在scroll发生的时候触发事件。这会导致大量 ngDoCheck 调用，从而触发 trackBy 重新计算。这可能会产生与 angular2-infinite-scroll 相关的性能问题。

P.S。我会接受比我的更好的任何其他解释，或者给出如何解决可能的性能问题或在将来避免它们的指南。

angular2-infinite-scroll 和 ng-for trackBy 函数

angular2-infinite-scroll and ng-for trackBy function

angular

nginfinitescroll