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的项目对象数组。数组中的项目对象数 - 150

当我在浏览器中渲染它时，当我尝试在我的chrome中进行性能分析时，它需要大约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元素。

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

来自 Databinding in angularjs

您无法真正展示 2000 的信息人在一页上。除此之外的任何东西都是非常糟糕的用户界面无论如何，人类无法处理这个问题。

Answer 2

我想说泄漏是在第二个数组中，因为您可能循环遍历同一个数组并显示用户中每个用户行的每个项目，这取决于您的测试数据的大小，该视图可能会变得相当大。我可以多做一些调查。顺便说一句，你的小提琴是完全不同的。

Answer 3

现在你正在循环150 X 150 = 22500项。并为每个人注册一个手表（或通过指令添加项目评级）。

相反 - 考虑将用户的评级添加到用户对象本身。它会增加每个用户对象的大小，但是你只会遍历150个项目并仅在它们上注册手表。

另外 - 考虑调查Indexes。很明显，可能会有类似的用户或项目评级。只需将它们编入索引，就可以减少它们，而不是循环遍历重物。

还有一件事 - 如果你要在同一个实例上运行指令，至少要更改代码：

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

到concat样式字符串计算：

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

这将为您节省计算中的巨大块。我为这个案子做了JSperf，注意区别，它快了大约99％; - ）

Angular JS ng-repeat消耗更多的浏览器内存

3 个答案: