Angular の変更検出を最適化する

ユーザー エクスペリエンスを向上させるため、変更検出を高速化します。

Angular は、データモデルの変更がアプリのビューに反映されるように、変更検出メカニズムを定期的に実行します。変更検出は、手動でトリガーすることも、非同期イベント(ユーザー操作や XHR の完了など)を介してトリガーすることもできます。

変更検出は強力なツールですが、実行頻度が高すぎると、大量の計算がトリガーされ、メイン ブラウザ スレッドがブロックされる可能性があります。

この記事では、アプリケーションの一部をスキップし、必要な場合にのみ変更検出を実行することで、変更検出メカニズムを制御して最適化する方法について説明します。

Angular の変更検出の内部

Angular の変更検出の仕組みを理解するために、サンプルアプリを見てみましょう。

アプリのコードは、こちらの GitHub リポジトリにあります。

このアプリは、会社の営業部門と研究開発部門の 2 つの部門の従業員を一覧表示し、次の 2 つのコンポーネントを備えています。

  • AppComponent(アプリのルート コンポーネント)
  • EmployeeListComponent の 2 つのインスタンス(販売用と研究開発用)。