Угловое ng-повторение JS потребляет больше памяти браузера

Question

Угловое ng-повторение 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

пункты - множество объектов изделия с только id и рейтингом. количество пункта возражает во множестве - 150

Когда я отдаю это в браузере, требуется приблизительно 250 МБ памяти кучи, когда я пытался представить в моем хроме - v23.0.1271.95.

Я использую AngularJS v1.0.3.

Есть ли проблема с угловым, или я делаю что-то не так здесь?

Вот скрипка JS

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

8

добавлено 28 Декабрь 2012 в 07:35 автор Sabarish Sankar отредактировано 01 Июль 2013 в 08:19

Просмотры: 2

источник

nl ja de

3 ответы

Хорошо это не ng-повторение по сути. Я думаю, что это - то, что вы добавляете крепления с {{item.rating}}.

Все те крепления регистрируют часы на объеме так:

150 * 2 = 300 (для 2 пользователей infos)
150 * 150 = 22500 (для получения информации о рейтинге)
Общее количество 22800 функций часов + 22800 dom элементов.

Это выдвинуло бы память мыслимой стоимости 250 МБ

From Databinding in angularjs

Вы не можете действительно показать больше, чем о <�сильном> 2000 сведения к a человек на единственной странице. Что-то большее чем это - действительно плохой UI, и люди не могут обработать это так или иначе.

12

добавлено 28 Декабрь 2012 в 01:19 автор Liviu T.

источник

@dg988 - от моего понимания в направляющей версии нет никакой привязки данных. It' s просто прямая замена (во время связи) {{рейтинг}} с ценностью myItem.rating

добавлено 13 Ноября 2013 в 06:02, автор AlexFoxGill, источник

Каков фактический вариант использования, которого вы пытаетесь достигнуть?

добавлено 28 Декабрь 2012 в 03:11, автор Liviu T., источник

Это - правильный ответ. В конце, если вы хотели показать это много информации, you' d, вероятно, быть более обеспеченным с таможенной директивой, которая выписала подданные к DOM вместо того, чтобы настроить крепления для каждого пункта.

добавлено 02 Январь 2013 в 01:38, автор Ben Lesh, источник

I' m очень интересующийся тем, почему та директива сокрушительна использование памяти так. Почему это настолько более эффективно, чем ng-повторение ? Факт - вы, вероятно, shouldn' t показывают столько пунктов сразу, но руководитель остается. Почему не всегда используют такую директиву? Кто-либо?

добавлено 28 Июнь 2013 в 06:17, автор bearfriend, источник

Спасибо Liviu! Я попробовал написанием таможенной директивы для внутреннего ng-повторения. Это на самом деле снизило память намного намного меньшему (приблизительно 40 МБ). Вот Скрипка JS того же самого: jsfiddle.net/JSWorld/WqSGR/9

добавлено 28 Декабрь 2012 в 03:08, автор Sabarish Sankar, источник

Для каждого пользователя я хочу перечислить рейтинг, который он дал для каждого пункта, доступного в порядке по убыванию рейтинга.

добавлено 28 Декабрь 2012 в 03:53, автор Sabarish Sankar, источник

автор ChrisMcKenzie · Answer 1 · 2012-12-28T08:01Z

Я хочу сказать, что утечка находится во втором множестве, потому что вы - потенциально перекручивание через то же самое множество и показ каждого пункта для каждого пользовательского ряда в пользователях так в зависимости от того, насколько большой ваши данные тестирования - то, что представление могло стать довольно большим. Я мог сделать немного больше исследования. btw ваша скрипка является чем-то совершенно различным.

автор Gilad Peleg · Answer 2 · 2013-08-20T10:20Z

Прямо сейчас вы - перекручивание до 150 X 150 = 22500 пунктов. И регистрация часов (или через директиву, просто добавляющую рейтинг изделия) каждому.

Вместо этого - рассматривают добавление рейтинга пользователя к самому пользовательскому объекту. Это увеличит размер каждого пользовательского объекта, но вы только образуете петли через 150 пунктов и зарегистрируете часы только на них.

Также - рассматривают изучение Индексы. Очевидно, что могли быть подобные пользователи или рейтинги изделия. Просто внесите их в указатель, таким образом, вместо перекручивания через тяжелые объекты, можно уменьшить их.

Еще одна вещь - если вы собираетесь быть управлением директивой тот же самый случай, по крайней мере измените код:

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

к concat разрабатывают вычисление последовательности:

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

Это спасет вам ОГРОМНОЕ кусок на вычислении. Я сделал a JSperf для этого случая заметьте различие, это приблизительно на 99% быстрее;-)