Question

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

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

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 /覆盖了本机函数，如addEventListener，setTimeout等。

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

此外，对scroll事件的订阅与.addEventListener（'scroll'）相同，它会在滚动发生时触发事件。这会导致很多ngDoCheck调用，触发trackBy重新计算。这可能会产生与angular2-infinite-scroll相关的性能问题。

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

angular2-无限滚动和ng-for trackBy功能

1 个答案: