8

私は次のコードを持っています

<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>

usersは、idとnameのみを持つユーザーオブジェクトの配列です。配列内のユーザーオブジェクトの数-150

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

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

AngularJSv1.0.3を使用しています。

角度に問題がありますか、それともここで何か間違ったことをしていますか？

これがJSフィドルです

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

4

3 に答える 3

12

まあ、それ自体はng-repeatではありません。{{item.rating}}でバインディングを追加しているのは事実だと思います。

これらのバインディングはすべて、スコープにウォッチを登録するため、次のようになります。

  • 150 * 2 = 300（2つのユーザー情報の場合）
  • 150 * 150 = 22500（評価情報用）
  • 合計22800の時計機能+22800のdom要素。

それはメモリを250MBの考えられる値にプッシュします

anglejsのデータバインディングから

1ページに約2000個以上の情報を人間に表示することはできません。それ以上のものは本当に悪いUIであり、人間はとにかくこれを処理することはできません。

于 2012-12-28T11:19:58.497 に答える
0

同じ配列をループしてユーザーのすべてのユーザー行のすべてのアイテムを表示している可能性があるため、リークは2番目の配列にあると言いたいので、テストデータの大きさによっては、ビューがかなり大きくなる可能性があります。もう少し調査することができます。ところで、あなたのフィドルはまったく違うものです。

于 2012-12-28T06:01:03.640 に答える
0

現在、150 X 150=22500アイテムをループしています。そして、それぞれに時計を登録します（または単にアイテムの評価を追加するディレクティブを介して）。

代わりに、ユーザーの評価をユーザーオブジェクト自体に追加することを検討してください。各ユーザーオブジェクトのサイズが大きくなりますが、ループするのは150アイテムのみで、ウォッチはそれらにのみ登録されます。

また、インデックスを調べることを検討してください。同様のユーザーまたはアイテムの評価が存在する可能性があることは明らかです。それらにインデックスを付けるだけなので、重いオブジェクトをループする代わりに、それらを減らすことができます。

もう1つ、同じインスタンスでディレクティブを実行する場合は、少なくともコードを変更してください。

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

concatスタイルの文字列計算に：

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

これにより、計算にかかる膨大な量を節約できます。この場合、JSperfを作成しました。違いに注意してください。約99％高速です;-)

于 2013-08-20T19:20:36.817 に答える