一尘不染

Angular JS ng-repeat占用更多浏览器内存

angularjs

我有以下代码

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


阅读 285

收藏
2020-07-04

共1个答案

一尘不染

嗯,这不是ng-repeat本身。我认为这是事实,您正在使用{{item.rating}}添加绑定。

所有这些绑定都会在范围内注册监视,因此:

  • 150 * 2 = 300(用于2个用户信息)
  • 150 * 150 = 22500(用于评分信息)
  • 共有22800个手表功能+ 22800个dom元素。

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

angularjs中的数据绑定

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

2020-07-04