NGをオンラインで最適化する方法はすでに多くあります。コアは、$$ウォッチャーの範囲の内部属性に関するすべてです。今日、私は何か他のことについて話します、これはNGの欠陥であるため、本質は変わらないままです。ただし、適切な方法を使用している限り、これらの問題は回避できると思います。
導入
AngularJSは、Googleが作成したMVVMフレームワークであるNGと略されます。これにより、フロントエンドプロジェクトの開発効率が向上します（実際には、実際に開発効率を改善できます）。コントローラー、指示、およびサービスを使用してプロジェクト全体を中心に展開し、ユニークなDIを使用して、3番目のレイヤーの前に呼び出しの問題を解決します。詳細については、以前に書いたNGソースコード分析を参照してください。
Ngの硬い傷
欠陥に関しては、まずその単純なデータバインディング原則について話さなければなりません
NGの各ページで定義されているモデルは、実際にリスナーを現在のスコープに追加します。内部コンテナは$$ wachersアレイです。ページ上のモデルが変更される限り、スコープ内の$ダイジェストメソッドがトリガーされます。現在のスコープツリー内のすべてのモデルを検索して、ページ上のモデルがデータの同期を取得できるようにするため、これは非常に時間がかかります。公式の声明は、ページに2,000人のリスナーが表示されると、ページのパフォーマンスが大幅に低下するということです。したがって、NGのパフォーマンスを向上させるには、この側面から開始する必要があります。
TIP1：1回限りのバインディング
実際、他の誰かがすでにオンラインでこれを言っています。これが新しい使用法です。 NGの1.3.0+バージョンは、モデルが一度だけバインドされる状況をサポートするために、すでに組み込みの構文を提供しています。次の例を参照してください。
古いコード
コードコピーは次のとおりです。
こんにちは
新しいコード
コードコピーは次のとおりです。
こんにちは
新しい構文は、モデルの前に::追加することであることがわかります。この構文は、オンラインで使用されるサードパーティのプラグインよりもはるかに便利だと思います。
コードコピーは次のとおりです。
TIP2：$ scope。$ digest vs $ scope。$ apply
多くの人が$ apply方法に精通していると思います。通常、NG環境でコードを実行するときに使用されます。ページのデータの同期を確実にするために、コード実行後に$ applyメソッドを呼び出して、内部$ダイジェストをトリガーしてスコープ内のすべてのモデルを確認します。実際、これは内部と呼ばれ、いくつかのコードスニペットのみを以下に記述します。
コードコピーは次のとおりです。
...
...
$ Rootscope。$ DIGEST
...
...
それらはすべて、実際に$ rotscopeのルートスコープの下で$ダイジェストを呼び出しています。では、異なるスコープでの$ダイジェストの違いは何ですか？実際、最も重要な違いはそれです
コードコピーは次のとおりです。
$ Digestのみディープで発信者の下のすべてのモデルを検索します
したがって、$ Scope、$ Rootscopeと比較して、モデルを見つけるのに大幅な時間を節約できます。
ただし、ページ上のすべてのモデルデータの同期を確認する場合は、$ rotscopeを呼び出す必要があるため、コードを作成する前にどのデータを同期するかを考えるのが最善です。
TIP3：ng-repeatをできる限りお電話ください
NG-Repeatはデフォルトで多くのリスナーを作成するため、データボリュームが大きい場合、これによりページパフォーマンスが消費されます。 NG-Repeatは、データリストを頻繁に更新する必要がある場合にのみ必要だと思います。そうでなければ、そこに非常に多くのリスナーを置くのは無駄です。現時点では、NG独自の$補間サービスを使用して、主にNGのコア解析サービス$ parseに依存している静的テンプレートエンジンと同様に、コードスニペットを解析し、データを1回限りのモデルに入力した後、これらのコードスニペットを直接割り当てることができます。
TIP4：コマンドにネイティブ構文を作成してみてください
NGはNG-ShowやNg-Hideなどの多くの指示を提供しますが、その機能は、モデルの真とFalseに基づいてコードスニペットを表示または非表示にすることです。ビジネス要件を迅速に実装できますが、これらの指示はデフォルトでリスナーを追加します。これらのコードスニペットが大規模な命令に存在する場合、より良い方法は、それを制御するための命令リンクに.show（）や.hide（）などの同様のJQメソッドを記述することです。これらは、AddEventListenerを使用して、実際に末梢命令でイベントを結合することができます。とにかく、コードを書く前に、リスナーの数を最小限に抑える方法を考えるのが最善です。そうすれば、ページのパフォーマンスを包括的に改善できます。
TIP5：ページでできるだけ少ないフィルターを使用します
ページ内のモデルの背後にフィルターを追加すると、現在のモデルが$ダイジェストで2回実行され、不必要なパフォーマンス廃棄物が発生します。初めては、$$ウォッチャー検出タスクが変更されるときです。 2回目は、モデル値が変更されたときに発生するため、できるだけ少ないインラインでフィルター構文を使用してみてください。次のように、ページのパフォーマンスに大きく影響します
$フィルターサービスを使用して、バックグラウンドのフィルター関数を呼び出すことをお勧めします。これにより、ページのパフォーマンスが大幅に向上する可能性があります。コードは次のとおりです
コードコピーは次のとおりです。
$フィルター（ 'フィルター'）（配列、式、コンパレータ）;
要約します
上記は、NGプロジェクトのパフォーマンスを改善するためのヒントです。 NGは非常に強力ですが、不規則なコードもパフォーマンスを破壊します。したがって、コードを書く前に、リスナーが必要でない場所を考えるのが最善です。