1

我正在使用 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();
  }
}

我将不胜感激任何解释。

4

1 回答 1

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 相关的性能问题。

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

于 2016-12-20T10:29:36.653 回答