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

Angular 有问题还是我在这里做错了什么？

这是JS fiddle

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

Answer 1

好吧，这不是 ng-repeat 本身。我认为这是您使用 {{item.rating}} 添加绑定(bind)的事实。

所有这些绑定(bind)都在范围上注册 watch ，因此:

150 * 2 = 300(对于 2 个用户信息)

150 * 150 = 22500(用于评级信息)

总共 22800 个 watch 函数 + 22800 个 dom 元素。

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

来自 Databinding in angularjs

You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway.