変更検出の高速化を実装して、ユーザー エクスペリエンスを向上させます。
Angular は、変更検出メカニズムを定期的に実行して、データモデルの変更をアプリのビューに反映します。変更の検出は、手動で、または非同期イベント(ユーザー操作や XHR の完了など)によってトリガーできます。
変更の検出は強力なツールですが、頻繁に実行されると、大量の計算がトリガーされ、メインのブラウザ スレッドがブロックされる可能性があります。
この投稿では、アプリケーションの一部をスキップし、必要な場合にのみ変更検出を実行することで、変更検出メカニズムを制御および最適化する方法について説明します。
Angular の変更検出機能
Angular の変更検出の仕組みを理解するために、サンプルアプリを見てみましょう。
アプリのコードは、こちらの GitHub リポジトリで確認できます。
このアプリは、会社の 2 つの部門(営業と研究開発)の従業員をリストアップし、次の 2 つのコンポーネントで構成されています。
AppComponent
(アプリのルート コンポーネント)EmployeeListComponent
の 2 つのインスタンス(1 つは販売用、もう 1 つは研究開発用)。
AppComponent
のテンプレートで、EmployeeListComponent
の 2 つのインスタンスを確認できます。
<app-employee-list
[data]="salesList"
department="Sales"
(add)="add(salesList, $event)"
(remove)="remove(salesList, $event)"
></app-employee-list>
<app-employee-list
[data]="rndList"
department="R&D"
(add)="add(rndList, $event)"
(remove)="remove(rndList, $event)"
></app-employee-list>
各従業員には名前と数値があります。アプリは、社員の数値をビジネス計算に渡し、結果を画面に表示します。
EmployeeListComponent
を見てみましょう。
const fibonacci = (num: number): number => {
if (num === 1 || num === 2) {
return 1;
}
return fibonacci(num - 1) + fibonacci(num - 2);
};
@Component(...)
export class EmployeeListComponent {
@Input() data: EmployeeData[];
@Input() department: string;
@Output() remove = new EventEmitter<EmployeeData>();
@Output() add = new EventEmitter<string>();
label: string;
handleKey(event: any) {
if (event.keyCode === 13) {
this.add.emit(this.label);
this.label = '';
}
}
calculate(num: number) {
return fibonacci(num);
}
}
EmployeeListComponent
は、従業員のリストと部門名を入力として受け取ります。ユーザーが従業員を削除または追加しようとすると、コンポーネントは対応する出力をトリガーします。このコンポーネントは、ビジネス計算を実装する calculate
メソッドも定義します。
以下は、EmployeeListComponent
のテンプレートです。
<h1 title="Department">{{ department }}</h1>
<mat-form-field>
<input placeholder="Enter name here" matInput type="text" [(ngModel)]="label" (keydown)="handleKey($event)">
</mat-form-field>
<mat-list>
<mat-list-item *ngFor="let item of data">
<h3 matLine title="Name">
{{ item.label }}
</h3>
<md-chip title="Score" class="mat-chip mat-primary mat-chip-selected" color="primary" selected="true">
{{ calculate(item.num) }}
</md-chip>
</mat-list-item>
</mat-list>
このコードは、リスト内のすべての従業員に対して反復処理を行い、従業員ごとにリストアイテムをレンダリングします。また、入力と EmployeeListComponent
で宣言された label
プロパティとの間の双方向データ バインディング用の ngModel
ディレクティブも含まれています。
EmployeeListComponent
の 2 つのインスタンスを使用して、アプリは次のコンポーネント ツリーを形成します。
AppComponent
はアプリケーションのルート コンポーネントです。その子コンポーネントは、EmployeeListComponent
の 2 つのインスタンスです。各インスタンスには、部門の個々の従業員を表す項目(E1、E2 など)のリストがあります。
ユーザーが EmployeeListComponent
の入力ボックスに新しい従業員の名前の入力を開始すると、Angular は AppComponent
からコンポーネント ツリー全体の変更検出をトリガーします。つまり、ユーザーがテキストを入力している間、Angular は各従業員に関連付けられた数値を繰り返し再計算して、前回のチェック以降に変更されていないことを確認します。
どれくらい遅くなるかを確認するには、StackBlitz で最適化されていないバージョンのプロジェクトを開き、従業員の名前を入力してください。
サンプル プロジェクトを設定し、Chrome DevTools の [Performance] タブを開くと、速度低下の原因が fibonacci
関数にあることを確認できます。
- `Ctrl+Shift+J` キー(Mac の場合は `Command+Option+J`)を押して、DevTools を開きます。
- [パフォーマンス] タブをクリックします。
次に、[Performance] パネルの左上隅にある [Record] をクリックし、アプリのテキスト ボックスのいずれかに入力を開始します。数秒後に、もう一度 [Record] をクリックして録音を停止します。Chrome DevTools が収集したプロファイリング データをすべて処理すると、次のような画面が表示されます。
リスト内に多数の従業員がいる場合、このプロセスによってブラウザの UI スレッドがブロックされてフレーム落ちが発生し、ユーザー エクスペリエンスが低下する可能性があります。
コンポーネント サブツリーのスキップ
ユーザーが [sales] EmployeeListComponent
のテキスト入力欄に入力している場合、[R&D] 部門のデータは変更されていないため、そのコンポーネントで変更検出を実行する必要はありません。R&D インスタンスで変更検出がトリガーされないようにするには、EmployeeListComponent
の changeDetectionStrategy
を OnPush
に設定します。
import { ChangeDetectionStrategy, ... } from '@angular/core';
@Component({
selector: 'app-employee-list',
template: `...`,
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['employee-list.component.css']
})
export class EmployeeListComponent {...}
これで、ユーザーがテキストを入力すると、対応する部門に対してのみ変更検出がトリガーされます。
この最適化が元のアプリケーションに適用されたかどうかは、こちらで確認できます。
OnPush
の変更検出戦略について詳しくは、Angular の公式ドキュメントをご覧ください。
この最適化の効果を確認するには、StackBlitz 上のアプリケーションに新しい従業員を入力します。
純粋なパイプの使用
EmployeeListComponent
の変更検出戦略が OnPush
に設定されている場合でも、ユーザーが対応するテキスト入力を入力すると、Angular は部門内のすべての従業員の数値を再計算します。
この動作を改善するには、純粋なパイプを利用できます。純粋なパイプと不純なパイプの両方が入力を受け取り、テンプレートで使用できる結果を返します。2 つの違いは、純粋なパイプは、前の呼び出しとは異なる入力を受け取った場合にのみ結果を再計算することです。
アプリは、EmployeeListComponent
で定義された calculate
メソッドを呼び出して、社員の数値に基づいて表示する値を計算します。計算を純粋なパイプに移動すると、Angular は引数が変更された場合にのみパイプ式を再計算します。フレームワークは参照チェックを実行して、パイプの引数が変更されたかどうかを判断します。つまり、従業員の数値が更新されない限り、Angular は再計算を行いません。
ビジネス計算を CalculatePipe
というパイプに移動する方法は次のとおりです。
import { Pipe, PipeTransform } from '@angular/core';
const fibonacci = (num: number): number => {
if (num === 1 || num === 2) {
return 1;
}
return fibonacci(num - 1) + fibonacci(num - 2);
};
@Pipe({
name: 'calculate'
})
export class CalculatePipe implements PipeTransform {
transform(val: number) {
return fibonacci(val);
}
}
パイプの transform
メソッドは fibonacci
関数を呼び出します。パイプが純粋であることに注目してください。特に指定しない限り、Angular ではすべてのパイプが純粋とみなされます。
最後に、EmployeeListComponent
のテンプレート内の式を更新します。
<mat-chip-list>
<md-chip>
{{ item.num | calculate }}
</md-chip>
</mat-chip-list>
これで、これで、ユーザーが部門に関連付けられたテキスト入力を入力しても、個々の社員の数値が再計算されることはありません。
以下のアプリでは、入力がどれだけスムーズになったかを確認できます。
最後に行った最適化の効果を確認するには、StackBlitz でこの例を試してみてください。
元のアプリケーションを純粋にパイプで最適化したコードは、こちらから入手できます。
まとめ
Angular アプリで実行時の遅延が発生した場合:
- Chrome DevTools でアプリケーションをプロファイリングし、速度が低下している原因を確認します。
OnPush
変更検出戦略を導入し、コンポーネントのサブツリーをプルーニングしました。- 負荷の高い計算を純粋なパイプ処理に移して、フレームワークが計算値のキャッシュを実行できるようにします。