12

今日、このコードによって引き起こされたパフォーマンスの問題を修正する必要がありました:テンプレート内で呼び出される updateStats に注意してください。

<script type="text/ng-template" id="entityGrouper">

<section>

<div>
<ul ng-click="hideEntityBox = !hideEntityBox">
<li>
{{ entityNode.name }}
</li>
<li ng-repeat="breadcrumbItem in entityNode.breadcrumb">
{{ breadcrumbItem }}
</li>
</ul>
{{ updateStats(entityNode) }}
<span ng-include="'/mypath/views/resume.html'"></span>
</div>

<div>

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

</section>

</script>

テンプレートの使用:

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

このコードをデバッグした後、この関数が配列サイズよりもはるかに多く呼び出されていることがわかりました (私の配列には 4 つのオブジェクトがあり、関数は 100 回以上呼び出されました)。マウス ホバーでもこの関数が呼び出されました。テンプレート内に ng-init を配置するだけでこれを修正したところ、適切に機能するようになりましたが、この関数が何度も呼び出された理由がわかりませんでした。双方向のデータバインディングについて何かありますか?

4

3 に答える 3

7

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

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

于 2016-11-24T16:55:36.837 に答える
4

これは、双方向のデータ バインディング (フォーム入力に適用可能) が原因ではなく、角度変化の検出が原因で発生しています。Angular は、テンプレートにバインドされた値のいずれかが変更されたかどうかを定期的にチェックし、変更された場合は、ビュー内のその値を更新します。通常、これはユーザーが生成したイベントによってトリガーされます。の値がupdateStats(entityNode)変更されたかどうかを確認するために、Angular はそれを評価し、パフォーマンス ヒットを引き起こします。

updateStats(entityNode) これを修正するには、結果が一度設定され、将来変更されない場合は、前述のワンタイム バインディングを使用できます。これはあなたの場合だと思いますが、あなたはすでに評価を に移動していますng-init。時間とともに更新される値については、entityNodelikeentityNode.statsで別のプロパティを作成し、それをテンプレートに表示して、updateStats(entityNode)必要な場合にのみコントローラーまたはサービスで を実行することをお勧めします。updateStats(entityNode)そうすることで、各ダイジェスト サイクルでの実行を回避し(その頻度については既に説明しました)、アプリのパフォーマンスを向上させます。

于 2016-11-25T10:11:18.013 に答える
4

表示されているのは、ダイジェスト サイクルの結果です。

a を追加する::と、関数が 1 回/1 回バインディングで呼び出されます。

{{ ::updateStats(entityNode) }}

于 2016-11-24T17:34:16.313 に答える