Сохранить или уничтожить данные / элементы DOM? Который требует больше ресурсов?
Я все больше и больше увлекаюсь разработкой приложений высокого уровня с помощью JavaScript/jQuery. Я пытался узнать больше о языке JavaScript и погрузиться в некоторые из более продвинутых функций. Я просто читал статью об утечках памяти, когда читал этот раздел статьи.
JavaScript - это язык сборки мусора, означающий, что память выделяется объектам при их создании и восстанавливается браузером, когда на них больше нет ссылок. Хотя в механизме сборки мусора в JavaScript нет ничего плохого, он не согласуется с тем, как некоторые браузеры обрабатывают выделение и восстановление памяти для объектов DOM.
Это заставило меня задуматься о некоторых моих привычках кодирования. В течение некоторого времени я был очень сосредоточен на минимизации количества запросов, которые я отправляю на сервер, что я считаю просто хорошей практикой. Но мне интересно, иногда я не захожу слишком далеко. Я очень не знаю о каких- либо проблемах / проблемах эффективности, которые идут с языком JavaScript.
пример
Недавно я создал приложение для управления изъятиями для буксирной компании. Я использовал виджет диалогового окна jQuery UI и заполнил сетку данных конкретными данными заявки. На первый взгляд, это звучит очень просто... но здесь очень много данных, передаваемых здесь.
(а теперь по вопросу... барабанная дробь, пожалуйста...)
Мне интересно, каковы плюсы / минусы для каждого из следующих вариантов.
1) Сделайте только один запрос на данный билет и сохраните его постоянно в DOM, Простое отображение / скрытие модального окна означает, что на тикет отправляется только один запрос.
2) Делать запрос каждый раз, когда билет открыт, и уничтожать его, когда он закрыт.
Моя естественная склонность была хранить билеты в DOM - но я обеспокоен тем, что это в конечном итоге начнет загружать тонну памяти, если приложение будет работать долго без сброса (что будет).
Я на самом деле просто ищу плюсы / минусы для этих двух вариантов (или что-то аккуратное, о котором я даже не слышал =P).
4 ответа
Решение здесь зависит от специфики вашей проблемы, так как "правильный" ответ будет зависеть от продолжительности времени, в течение которого страница остается открытой, размера элементов DOM и задержки запроса. Вот еще несколько вещей, чтобы рассмотреть:
- Храните только самые новые n элементов в кэше. Это хорошо работает, если вы можете переотображать предметы только в течение короткого периода времени.
- Сохраните данные для каждого элемента вместо элемента DOM и восстановите DOM на каждом дисплее.
- Используйте хранилище HTML5 для хранения данных вместо DOM или хранилища переменных. Это имеет дополнительное преимущество, заключающееся в том, что данные могут храниться в запросах страниц.
Любая стратегия кэширования должна учитывать, когда необходимо сделать кэш недействительным и повторно запросить обновленные данные. В зависимости от вашей стратегии вам нужно будет обрабатывать конфликты, возникающие из-за нескольких редакторов.
Лучший способ - начать использовать самый простой метод и добавить сложность, чтобы повысить скорость только там, где это необходимо.
Третий путь - хранить данные, связанные с заявкой, в JS, а также создавать и уничтожать DOM-узлы при вызове / отклонении модального окна (шаблоны jQuery могут быть здесь естественным решением).
Тем не менее, основной причиной, по которой вы избегаете сетевого трафика, является пользовательский опыт (сеть медленнее, чем RAM, всегда). Но этот опыт не может быть ухудшен, если каждый раз делать запрос, если интуитивно понятно, что пользователь загружает данные.
Я бы сказал, что номер 2 будет лучшим. Потому что таким образом, если билет меняется после того, как вы его откроете, это изменение появится во второй раз, когда билет будет открыт.
Один важный фактор в количестве перерисовок / перекомпоновок, которые запускаются для манипуляций с DOM. Намного эффективнее создавать изменения содержимого и вставлять их за один раз, чем делать это постепенно, поскольку каждое увеличение вызывает перерисовку / перекомпоновку.
Смотрите: http://www.youtube.com/watch?v=AKZ2fj8155I чтобы лучше это понять.