Angular でバインディング (ダーティチェック) パフォーマンスを最適化するためのヒントに関する簡単な説明-jsチュートリアル-php.cn

Angular でバインディング (ダーティチェック) パフォーマンスを最適化するためのヒントに関する簡単な説明

青灯夜游

リリース： 2021-06-22 10:44:55

転載

2290 人が閲覧しました

この記事では、Angular バインディング (ダーティチェック) におけるパフォーマンス最適化テクニックを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular でバインディング (ダーティチェック) パフォーマンスを最適化するためのヒントに関する簡単な説明

#1. なぜ最適化する必要があるのか

双方向バインディングは諸刃の剣であり、開発効率を向上させながら、パフォーマンスも犠牲になります。もちろん、ハードウェアのパフォーマンスの向上と Angular 自体のパフォーマンスの向上により、一般的な (中小規模の) 複雑さのアプリケーションの場合、パフォーマンスの問題は無視できます。ただし、特殊なシナリオや複雑なページの場合は、データバインディングの問題に個別に対処する必要があります。そうしないと、遅延が発生し、ユーザーエクスペリエンスに影響を及ぼします。 [推奨関連チュートリアル: "angular チュートリアル"]

2. プログラミングの習慣については、

、日常のヒントや習慣をいくつか活用できます。 Angular バインディングのパフォーマンスを向上させます。

2.1. NgForOf、パフォーマンスを向上させるために trackBy を追加します

trackBy は、反復可能な項目の変更を追跡する方法を定義する関数です。イテレータに項目が追加、移動、または削除されると、ディレクティブは適切な DOM ノードを再レンダリングする必要があります。 DOM 内のチャーンを最小限に抑えるために、変更されたノードのみが再レンダリングされます。

デフォルトでは、変更検出器はオブジェクトインスタンスが反復可能オブジェクトを識別すると想定します。この関数が提供されると、ディレクティブはオブジェクト自体の ID ではなく、この関数の呼び出し結果を使用して項目ノードを識別します。

2.2. Angular データバインディングの 3 つの方法

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

ログイン後にコピー

直接バインディング: ほとんどの場合、これらが最善ですパフォーマンス手法。
バインディングメソッド呼び出しの結果: 各ダーティ値検出プロセス中に、クラス方程式を 1 回呼び出す必要があります。特別な必要がない場合は、この使用方法はできるだけ避けてください。
pipe メソッド: バインディング関数に似ており、ダーティ値検出 classPipe が呼び出されるたびに実行されます。ただし、Angular ではパイプが最適化され、キャッシュが追加されているため、項目が前回と等しい場合は結果が直接返されます。

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

ログイン後にコピー

2.3. 必要がない限り、一方向バインディングを使用して監視値の数を減らします

一般的な場合データの場合、ユーザーに表示するだけで済み、変更する必要はありません。次に、データのこの部分については、一方向バインディング (ts->html) を使用します。
例:

<!-- 也称插值绑定 -->
 <span>{{yourMessage}}</span>

ログイン後にコピー

3. ChangeDetectionStrategy.OnPush を使用してパフォーマンスを向上させます

非常に複雑なページの場合、上記のヒントだけでは十分ではありませんが、Angular はこれらのヒントも考慮して、多くのメソッドを提供します。
Angular の比較 AngularJS は、元の双方向検出 (親->子、子->親) から一方向 (親->子) に検出を変更します。したがって、すべての変更検出は決定論的に収束します。
Angular がコンポーネントを定義するとき、変更検出構成アイテムを

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

ログイン後にコピー

として渡すことができます。

onpush 戦略は、入力参照 (オブジェクトの場合) が変更されたかどうかのみを判断して、汚れたチェック。したがって、onpush 戦略を使用して、変更検出のオーバーヘッドを削減できます。

4. ngzone-runOutsideAngular を使用して最適化する

Angular は、NgZone に依存して非同期操作をリッスンし、ルートから変更検出を実行します。言い換えれば、コード内のすべての addEventListener がダーティチェックをトリガーします。しかし、明確にしておきたいのは、addEventListener が実行する必要があるものの一部はデータの結果に影響を及ぼさない (または無視できる) ことです。そうでない場合は、ダーティチェックがトリガーされます。たとえば、スクロールの監視、マウスイベントの監視などです。

この場合、ゾーンによって提供される runOutsideAngular を使用して、これらのイベントがダーティチェックをトリガーするのを防ぐことができます。

this.zone.runOutsideAngular(() => {
    window.document.addEventListener(&#39;mousemove&#39;, this.bindMouse);
});

ログイン後にコピー

5. ダーティチェックを手動で制御する ChangeDetectorRef

Angular の ChangeDetectorRef インスタンスは、コンポーネントのダーティチェックをバインドまたはバインド解除するメソッドを提供します。

class ChangeDetectorRef {
  markForCheck() : void     // 通知框架进行变化检查/Change Detection
  detach() : void           // 禁止脏检查
  detectChanges() : void    // 手工触发脏检查， 从该组件到各个子组件执行一次变化检测
  checkNoChanges() : void
  reattach() : void         // detach逆操作，启用脏检查
}

ログイン後にコピー