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

users是仅具有id和name的用户对象的数组。数组中的用户对象数-150

items是仅具有id和rating的item对象的数组。数组中的项目对象数-150

当我在浏览器中渲染此图像时，当我尝试在chrome-v23.0.1271.95中进行性能分析时，它将占用约250MB的堆内存。

我正在使用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元素。

那会将内存推到可以想象的250MB值

从 angularjs中的数据绑定

您实际上无法在一个页面上向一个人显示超过 2000条信息。除此之外，还真是糟糕的UI，人类无论如何都无法处理。