Angular JS ng-repeat 消耗更多浏览器内存 [英] Angular JS ng-repeat consumes more browser memory

问题描述

我有以下代码

<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

users is an array of user objects with only id and name. number of user objects in array - 150

items 是一个只有 id 和 rating 的 item 对象数组.数组中的项目对象数 - 150

items is an array of item objects with only id and rating. number of item objects in array - 150

当我在浏览器中渲染它时，当我尝试在我的 chrome - v23.0.1271.95 中进行分析时，它需要大约 250MB 的堆内存.

When i render this in browser, it takes about 250MB of heap memory when i tried profiling in my chrome - v23.0.1271.95.

我使用的是 AngularJS v1.0.3.

I am using AngularJS v1.0.3.

角度有问题还是我在这里做错了什么?

Is there an issue with angular or am i doing anything wrong here?

这是JS小提琴

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

推荐答案

嗯，这不是 ng-repeat 本身.我认为这是您添加与 {{item.rating}} 绑定的事实.

Well it's not the ng-repeat per se. I think it's the fact that you are adding bindings with the {{item.rating}}.

所有这些绑定都在作用域上注册监视，因此:

All those bindings register watches on the scope so:

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

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

That would push the memory to a conceivable value of 250MB

来自 angularjs 中的数据绑定

From Databinding in angularjs

您实际上无法向一个用户显示超过 2000 条信息人在一个页面上.除此之外的任何东西都是非常糟糕的用户界面，并且人类无论如何都无法处理这个.

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.

这篇关于Angular JS ng-repeat 消耗更多浏览器内存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！