Угловое 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
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
добавлено
@dg988 - от моего понимания в направляющей версии нет никакой привязки данных. It' s просто прямая замена (во время связи) {{рейтинг}} с ценностью myItem.rating
добавлено автор AlexFoxGill, источник
Каков фактический вариант использования, которого вы пытаетесь достигнуть?
добавлено автор Liviu T., источник
Это - правильный ответ. В конце, если вы хотели показать это много информации, you' d, вероятно, быть более обеспеченным с таможенной директивой, которая выписала подданные к DOM вместо того, чтобы настроить крепления для каждого пункта.
добавлено автор Ben Lesh, источник
I' m очень интересующийся тем, почему та директива сокрушительна использование памяти так. Почему это настолько более эффективно, чем ng-повторение ? Факт - вы, вероятно, shouldn' t показывают столько пунктов сразу, но руководитель остается. Почему не всегда используют такую директиву? Кто-либо?
добавлено автор bearfriend, источник
Спасибо Liviu! Я попробовал написанием таможенной директивы для внутреннего ng-повторения. Это на самом деле снизило память намного намного меньшему (приблизительно 40 МБ). Вот Скрипка JS того же самого: jsfiddle.net/JSWorld/WqSGR/9
добавлено автор Sabarish Sankar, источник
Для каждого пользователя я хочу перечислить рейтинг, который он дал для каждого пункта, доступного в порядке по убыванию рейтинга.
добавлено автор Sabarish Sankar, источник

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

0
добавлено
Я обновил скрипку. Извините, отправленный неправильная связь. Тем не менее проблема сохраняется для меня в моем случае. Почему перекручивание будет стоить такой памяти. Обычно есть ли проблема с использованием вложенных ng-повторений?
добавлено автор Sabarish Sankar, источник

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

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

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

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

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

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

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

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

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

Angular.js (1.x) — русскоговорящее сообщество
Angular.js (1.x) — русскоговорящее сообщество
704 участник(ов)

Общаемся и обсуждаем темы, посвященные Angular 1.x и экосистеме.

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

AngularJS, Javascript
AngularJS, Javascript
370 участник(ов)

Angularjs russian chat