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

【问题标题】：angular2-infinite-scroll and ng-for trackBy functionangular2-infinite-scroll 和 ng-for trackBy 函数
【发布时间】：2017-05-04 16:03:05
【问题描述】：

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

这是我担心的事情，我找不到任何关于这种行为的信息。这是一个例子：

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

我将不胜感激。

【问题讨论】：

你看NgFor源代码了吗？在 for 循环语句中有 NgDoCheck 钩子，其中称为 differ.diff()，其中称为 DefaultIterableDiffer.check，最后称为 trackByFn 函数。每次更改检测运行期间都会调用 NgDoCheck。
这是个好方向。那么为什么在我滚动时调用 NgDoCheck 。如果 angular2-infinite-scroll 对滚动进行如此多的检查，这是性能问题吗？
github.com/orizens/angular2-infinite-scroll/blob/…
我调查了代码。似乎没有什么是令人惊讶的。我很惊讶当容器订阅滚动事件时会发生什么。看起来在一次滚动操作中触发了很多事件。

标签： angular nginfinitescroll

【解决方案1】：

我想我找到了答案：在 Angular 2 应用程序中，zone.js 基本上填充/覆盖了原生函数，如 addEventListener、setTimeout 等。

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

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

附：我会接受比我更好的任何其他解释，或者提供指导如何解决可能的性能问题或在未来避免这些问题。

【讨论】：