角JS納克重複消耗更多的瀏覽器存儲器

我有以下代碼角JS納克重複消耗更多的瀏覽器存儲器

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

用戶是唯一的ID和名稱的用戶對象的陣列。數組中的用戶對象的數量 - 150

items是一個只有id和rating的項目對象數組。數組中的項目對象的數量 - 150

當我在瀏覽器中渲染它時，當我嘗試在我的chrome中進行剖析時需要大約250MB的堆內存 - v23.0.1271.95。

我正在使用AngularJS v1.0.3。

是否存在角度問題還是我在這裏做錯了什麼？

這裏是JS小提琴

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

來源

2012-12-28 Sabarish Sankar

恩，這不是ng-repeat本身。我認爲這是事實，你正在與{{item.rating}}添加綁定。

所有這些綁定註冊的範圍，使手錶：

150 * 2 = 300（對於2個用戶的相關信息）
150 * 150 = 22500（用於等級信息）
總22800個手錶功能+ 22800個dom元素。

這將推動內存爲250MB

的可能的值從Databinding in angularjs

你真的不能表現出比約條信息更上一個人在一個頁面上。除此之外的任何東西都是非常糟糕的UI，而且人類無法處理這個問題。

來源

2012-12-28 11:19:58

謝謝Liviu！我嘗試着寫一個內部ng-repeat的自定義指令。這實際上將內存降低了很多（大約40MB）。這裏是JS小提琴相同：http://jsfiddle.net/JSWorld/WqSGR/9/ –

你試圖實現什麼樣的實際使用情況？ –

對於每個用戶，我想列出他給出的每個項目的評分，並按照評分的降序排列。 –

我想說的泄漏是第二陣列中，因爲你可能通過在同一陣列循環並顯示每個項目在用戶的每用戶行，以便根據您的測試數據有多大，視圖會變得相當大。我可以做更多的調查。 btw你的小提琴是完全不同的東西。

來源

2012-12-28 06:01:03 ChrisMcKenzie

我已經更新了小提琴。對不起，發佈了錯誤的鏈接。在我的情況下，問題依然存在。爲什麼循環會花費如此多的記憶。使用嵌套的ng-repeats通常有問題嗎？ –

現在你正在循環150 X 150 = 22500項。並註冊一個手錶（或通過指令只是增加項目評級）到每一個。

改爲 - 考慮將用戶的評分添加到用戶對象本身。它會增加每個用戶對象的大小，但是你只能循環150個項目並且只在它們上面註冊手錶。

此外 - 考慮到Indexes。很明顯，可能會有類似的用戶或項目評分。只需對它們進行索引，而不是在重物上循環，則可以減少它們。

一兩件事 - 如果你要運行該指令相同的實例，至少更改代碼：

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

到CONCAT風格串算出：

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

這將爲您節省一個巨大的塊計算。我爲這種情況製作了一個JSperf，注意不同之處，它的速度快了99％;-)

來源

2013-08-20 19:20:36

角JS納克重複消耗更多的瀏覽器存儲器

回答

相關問題