Ionic 离子载玻片性能问题，方法调用过于频繁

Question

我对离子载玻片组件有疑问。我在我的 ion-slide 中调用一个方法，但注意到这个方法被称为 经常荒谬 并且我不确定为什么。它还会显着减慢一切。

最初该方法被调用了 900 次（即使我只显示了 100 张幻灯片）并且幻灯片的最轻微拖动再次触发了 900 次方法调用，因此只需从第一张幻灯片滑动到第二张幻灯片，该方法就具有被触发 5000 多次，具体取决于我滑动的速度。

知道为什么吗？我正在使用 Ionic 4.4、Angular 5.0.3 和 Ionic-Angular 3.9.2.

模板

<ion-content>
  <ion-slides>
    <ion-slide *ngFor="let slide of slides">
      <div>
        {{slide}} - {{myMethod()}}
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

组件

@Component({
  selector: 'page-my',
  templateUrl: 'my-page.html'
})
export class MyPage implements OnInit {

  slides: number[] = [];
  methodCounter: number = 0;

  ngOnInit() {
    let numberOfSlides = 100;
    for (var i = 0; i < numberOfSlides; i++) {
      this.slides[i] = i;
    }
  }

  public myMethod(): string {
    console.log('myMethod called ' + this.methodCounter++);
    return 'foo';
  }
}

https://www.youtube.com/watch?v=5-L4ZOIX5Ew

Answer 1

我建议将组件上的 ChangeDetectionStrategy 更改为 "OnPush"：（在此处查看更多信息：angular change detection explained）

之后您的组件将如下所示：

import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'page-my',
  templateUrl: 'my-page.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyPage implements OnInit {

  slides: number[] = [];
  methodCounter: number = 0;

  ngOnInit() {
    let numberOfSlides = 100;
    for (var i = 0; i < numberOfSlides; i++) {
      this.slides[i] = i;
    }
  }

  public slideChanged(): void {
    console.log('slide changed');
    this.cd.markForCheck();
  }

  public myMethod(): string {
    console.log('myMethod called ' + this.methodCounter++);
    return 'foo';
  }
}

您的 html 模板将如下所示：

<ion-slides (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let slide of slides">
      <div>
        {{slide}} - {{myMethod()}}
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

解释：

随着 ChangeDetectionStrategy 的变化，您基本上告诉 angular 您知道何时应该重新渲染组件，如果发生此事件，您通过调用 markForCheck() 告诉它。因此，每次幻灯片发生变化时，都会调用 slideChanged() 方法，我们明确告诉 angular 它应该重新呈现该组件。当组件重新渲染时，方法 myMethod() 应该再次执行并显示更新的内容。这样你就有了一个性能更高的组件，方法 myMethod() 只在初始化时或当你明确告诉时调用。

Ionic 离子载玻片性能问题，方法调用过于频繁

Ionic ion-slides performance issue, too frequent method calls

ionic-framework

ion-slides

angular