関数が呼び出され、何度（角度JS）

Question

今日は、私は、このコードによるパフォーマンスの問題を修正しなければならなかった

<div ng-repeat="entityNode in entityNode.group" ng-include="'entityGrouper'"></div> 

このコードをデバッグした後、この関数は配列サイズ（配列は4つのオブジェクトを持ち、関数は100回以上呼び出されました）よりもずっと多く呼び出されました。 テンプレートの中にng-initを置くだけで問題は解決しましたが、今は正常に動作していますが、なぜこの関数が何度も呼び出された理由は分かりませんでした。 2つの方法でデータをバインドする方法はありますか？

Answer 1

これは（入力を形成するために適用可能である）ので、結合双方向のデータではない出来事ではなく、なぜなら角度変化検出されます。 Angularは、テンプレートにバインドされている値のいずれかが変更されたかどうかを定期的にチェックし、変更されている場合は、ビューの値を更新します。通常は、ユーザーが生成したイベントによってトリガーされます。 updateStats(entityNode)の値が変更されたかどうかを確認するために、Angularがそれを評価します。これによりパフォーマンスが低下します。

これを修正するには、結果が一度設定され、今後変更されない場合は、先に言及したワンタイムバインディングupdateStats(entityNode)を使用することがあります。これはあなたのケースで、あなたはすでに評価をng-initに移しています。時間とともに更新される値については、entityNodeのような別のプロパティをentityNode.statsのように作成し、それをテンプレートに表示し、コントローラーまたはサービスで必要なときにのみ実行してください（updateStats(entityNode)）。これにより、各ダイジェストサイクルでupdateStats(entityNode)を実行することはできません（既にどのくらいの頻度で表示されているかは分かります）。これによりアプリのパフォーマンスが向上します。

Answer 2

通常、このようなシナリオでは$watchを使用することをお勧めします。関数{{updateStats()}}をバインドしているので、ダイジェストサイクルごとに実行されます。

コードではダイジェストサイクルが呼び出されるたびに関数も呼び出されます。また、ダイジェストサイクルは頻繁にAngularの内部で呼ばれます。

Answer 3

あなたが見ているのは、ダイジェストサイクルの結果です。

::を追加すると、機能は1回/ 1回バインディングと呼ばれます。

{{ ::updateStats(entityNode) }}