angularjs_AngularJS の最適化のヒント

インターネット上にはすでに ng を最適化する方法がたくさんあります。その核心は、$$watchers スコープの内部プロパティから始まります。これは、本質は同じですが、それは難しい部分です。怪我はNGですが、適切な技術を使用している限り、これらの問題は回避できると信じています。

NG 紹介

ng と呼ばれる angularjs は、Google によって作成された mvvm フレームワークで、フロントエンド プロジェクトの開発効率を向上させます (実際には、プロジェクト全体をコントローラー、命令、などで囲みます)。詳細については、以前に書いた ng ソースコード分析を参照してください。

NG の欠点

欠陥については、まずその単純なデータ バインディング原則について話しましょう

ng の各ページで定義された各モデルは、実際には現在のスコープにリスナーを追加します。ページ上のモデルが変更される限り、内部コンテナーは $digest メソッドになります。トリガーされると、ページ上のモデルがデータを同期できるようにするために、現在のスコープ ツリー内のすべてのモデルが検索されるため、これには非常に時間がかかります。公式には、2000 個のリスナーがページに表示されると、ページのパフォーマンスが大幅に低下するため、ng のパフォーマンスを改善するには、この側面から始める必要があります。

ヒント 1: 1 回バインド

実際、他の人がこれをオンラインですでに述べています。ここで、ng の 1.3.0 バージョンには、モデルが 1 回だけバインドされる状況をサポートする構文が組み込まれています。 :
古いコード

コードをコピー コードは次のとおりです:

こんにちは

新しいコード

コードをコピー コードは次のとおりです:

こんにちは

新しい構文はモデルの前に :: を追加するものであることがわかります。この構文はオンラインで使用されるサードパーティのプラグインよりもはるかに便利だと思います。

コードをコピー コードは次のとおりです:

ヒント 2: $scope.$digest と $scope.$apply

$apply メソッドは多くの人が知っていると思いますが、通常、コードが ng 環境で実行されていない場合に使用され、コードの実行が完了した後に $apply メソッドを呼び出します。内部 $digest をトリガーして効果を確認します。ドメイン内のすべてのモデルは実際に内部でこのように呼び出されます。以下に示すのは一部のコード スニペットのみです。

コードをコピーします コードは次のとおりです:

...
...
$rootScope.$digest
...
...

実際に行うのは、$rootScope のルート スコープで $digest を呼び出すことだけです。では、異なるスコープでの $digest の違いは何でしょうか? 実際、最も重要な違いは
です。

コードをコピー コードは次のとおりです:

$digest は、呼び出し元
の下にあるすべてのモデルのみを深く検索します。

したがって、$scope は、$rootScope と比較して、モデルの検索にかかる時間を大幅に節約します。

ただし、ページ上のすべてのモデル データの同期を確実にしたい場合は、$rootScope を呼び出す必要があるため、コードを記述する前に、どのデータを同期的に変更する必要があるかを検討することが最善です。

ヒント 3: ng-repeat の呼び出しはできるだけ少なくする

ng-repeat はデフォルトで大量のリスナーを作成するため、データ量が多い場合、ページのパフォーマンスを消費します。データリストを頻繁に更新する必要がある場合にのみ ng-repeat を使用する必要があると思います。それ以外の場合は。現時点では、ng に付属の $interpolate サービスを使用してコード フラグメントを解析することもできます。これは、内部で主に ng コアに依存しています。データを入力した後のコード スニペットは、ワンタイム モデル

に直接割り当てることができます。

ヒント 4: コマンド

でネイティブ構文を記述してみてください

ng には ng-show や ng-hide など多くの命令が用意されていますが、これらの命令はモデルの真偽に応じてコードの断片を表示または非表示にする機能ですが、これらの命令はビジネス要件を迅速に実現します。これらのコード スニペットが大きな命令に存在する場合、より良い方法は、命令リンクに .show()、.hide() およびその他の同様の jq メソッドを記述してそれを制御することです。組み込みのイベント命令と同様に、これらは実際にはペリフェラル命令で addEventListener を使用してイベントにバインドできます。とにかく、コードを記述する前に、リスナーの数を増やす方法を検討するのが最善です。少なくとも、これによりページのパフォーマンスが包括的に向上します。

ヒント 5: ページ上で使用するフィルターはできるだけ少なくしてください

ページ内のモデルの後にフィルターを追加すると、$digest で現在のモデルが 2 回実行されることになり、1 回目は $$watchers がタスクの変更を検出したときに発生し、2 回目はパフォーマンスが無駄になります。モデル値を変更するときは、インライン フィルター構文の使用をできる限り少なくするようにしてください。以下はページのパフォーマンスに大きな影響を与えるためです

$filter サービスを使用してバックグラウンドでフィルター関数を呼び出すことをお勧めします。これにより、ページのパフォーマンスが大幅に向上します。

コードをコピー コードは次のとおりです:

$filter('filter')(配列, 式, コンパレータ);

概要

上記は ng プロジェクトのパフォーマンスを向上させるためのヒントです。ng は非常に強力ですが、標準以外のコードはパフォーマンスを損なう可能性があるため、コードを記述する前に、リスナーが不要な場所を考慮することが最善です。 .