Angular パフォーマンス

Ionic コンポーネントでの *ngFor

Ionic コンポーネントで*ngForを使用する場合、Angular のtrackByオプションの使用をお勧めします。これにより、Angular は変更の伝播をはるかに効率的に管理し、コンポーネント全体を再作成するのではなく、コンポーネント内のコンテンツのみを更新できます。

trackByを使用することで、各ループ要素に安定した ID を提供できるため、Angular はイテレーター内の挿入と削除を追跡できます。以下は、trackByの使用方法の例です。

home.page.html

<ion-item *ngFor="let item of items; trackBy:trackItems">
  <ion-label>{{ item.value }}</ion-label>
</ion-item>

home.component.ts

items = [
  { id: 0, value: 'Item 0' },
  { id: 1, value: 'Item 1' },
  ...
]

trackItems(index: number, itemObject: any) {
  return itemObject.id;
}

この例では、itemsというオブジェクトの配列があります。各オブジェクトにはvalueとidが含まれています。trackByを使用して、各オブジェクトのidを返すtrackItems関数を渡します。このidは、各ループ要素に安定した ID を提供するために使用されます。

Angular がngForによる変更の伝播をどのように管理するかについての詳細は、https://angular.io/api/common/NgForOf#change-propagationを参照してください。

Ionic チームより

Ionic Angular での遅延読み込み方法

スケルトン画面による知覚パフォーマンスの向上

Angular チームより

パフォーマンスが高く、プログレッシブな Angular アプリを構築する - web.dev

コミュニティより

Ionic での高パフォーマンスアニメーション - Josh Morony

Ionic での高パフォーマンスリストフィルタリング - Josh Morony

Ionic での効率的な DOM 書き込みによるパフォーマンス向上 - Josh Morony

Ionic フレームワークは高速です（しかし、コードはそうではないかもしれません） - Josh Morony

注記

共有したいガイドがありますか？下の「このページを編集」ボタンをクリックしてください。