角度JSのNG-repeatがより多くのブラウザのメモリ

Question

を消費し、私は次のコードを持っている

<table> 
<thead><td>Id</td><td>Name</td><td>Ratings</td></thead> 
<tbody> 
    <tr ng-repeat="user in users"> 
    <td>{{user.id}}</td> 
    <td>{{user.name}}</td> 
    <td><div ng-repeat="item in items">{{item.rating}}</div></td> 
    </tr> 
</tbody> 
</table> 

ユーザーのみのIDと名前のユーザーオブジェクトの配列です。配列内のユーザオブジェクトの数 - 150

itemsは、idとratingだけを持つアイテムオブジェクトの配列です。配列内のアイテムオブジェクトの数 - 150

ブラウザでこれをレンダリングすると、クロムでプロファイリングしようとすると約250MBのヒープメモリが必要になります - v23.0.1271.95。

私はAngularJS v1.0.3を使用しています。

ここに何か問題がありますか？ここで

JSフィドル

http://jsfiddle.net/JSWorld/WqSGR/5/

Answer 1

それは、ng-repeatそのものではありません。あなたが{{item.rating}}でバインディングを追加しているのは事実だと思います。 （レーティング情報について）

• 150 * 2 = 300（2ユーザーに関する情報について）
• 150 * 150 = 22500
• 合計：

  これらすべてのバインディングはそうスコープで腕時計を登録します22800の時計機能+ 22800のdom要素。あなたは本当に ヒトにより多くの情報について作品を表示することはできませんDatabinding in angularjs

  から250メガバイト

  の想定値にメモリをプッシュするだろう

1ページにそれ以上のものは本当に悪いUIです。 人間はこれをとにかく処理できません。

Answer 2

は、私はあなたが潜在的に同じ配列をループして、ユーザーにすべてのユーザー行のすべてのアイテムを表示するように依存しているので、漏れが二番目の配列であると言いたいですテストデータがどのくらい大きくて、そのビューがかなり大きくなるかについてです。私はもう少し調査することができます。 btwあなたのバイブルは全く違うものです。

Answer 3

今は150×150 = 22500個のアイテムをループしています。時計を登録する（または項目の評価を加えるだけの指示で）、それぞれの時計に登録します。

代わりに、ユーザーのレーティングをユーザーオブジェクト自体に追加することを検討してください。それは各ユーザオブジェクトのサイズを増加させますが、あなたは150アイテムだけをループし、時計のみを登録します。

また、Indexesを調べることを検討してください。似たようなユーザーや商品の評価があることは明らかです。それらをインデックス化するだけで、重いオブジェクトをループするのではなく、それらを減らすことができます。

もう一つ - あなたはディレクティブに同じインスタンスを実行しようとしている場合は、少なくとも、コード変更：

var text = '<div>' + myItem.rating + '</div>'; 

この意志：連結形式文字列の計算に

var text = myTemplate.replace("{{rating}}",myItem.rating); 

をHUGEチャンクを保存してください。私はこの場合にJSperfを作りました。差異に気づくと約99％速くなります;-)