Является ли более эффективным сохранять элементы DOM на странице или повторно отображать их при необходимости?

Question

У меня есть диалоговое окно, с которым связаны настройки.Когда пользователь нажимает кнопку «Настройки», отображается форма, позволяющая изменить их.

Что более эффективно :

• , чтобы получить настройкиdiv существуют скрытые на странице и отображаются при необходимости

ИЛИ

• для создания настроек div и заполнения их данными при необходимости?

В первом сценарии вам не нужно создавать элементы DOM и заполнять их каждый раз, но если одновременно открыто много диалоговых окон (обычная ситуация), тогда количество элементов настраница довольно большая, и многие из них не будут использоваться часто.Но во второй ситуации элементы создаются и добавляются в DOM, что удорожает.

Answer 1

Я бы посоветовал вам «кэшировать» ваш html на странице, но принудить браузер не отображать его до тех пор, пока он не понадобится (пока пользователь не запросит данные или просто не прокрутит до них).Основная идея - добавить ваш html (с данными) на страницу, но закомментировать.Например,

<div id="cached-html">
  <!--
    <div>
    ...some custom html here
    </div>
  -->
</div>

Затем, как только пользователь запросил HTML, вы можете сделать следующее:

var html = document.getElementById('cached-html'),
            inner = html.innerHTML;
html.innerHTML = inner.substring(4, inner.length - 4);

Плюсы.это то, что вы не беспокоите свой браузер с начальным рендерингом (позже вы можете просто использовать display:none, чтобы скрыть его снова), так что ваша страница рендерится быстрее.Ваши данные (и, как следствие, внутренний html) часто меняются, поэтому будет лучше перерисовывать их каждый раз, когда пользователь запрашивает их, но если они почти статичны, то Hide / Show должен быть более эффективным.

Answer 2

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

Реальный вопрос в том, что будет лучше для вашей страницы, больше скриптов или больше элементов dom.

Answer 3

Когда вам нужно отобразить один и тот же параметр div в нескольких местах.Сохранение этого скрытого является лучшим решением.

Помните, что создание нового элемента dom или клонирование существующего элемента dom дает почти такую ​​же производительность, но для клонирования или поддержания ясности кода или шаблона лучше.

Реализация с использованием шаблона : Создайте шаблон настройки div и оставьте его скрытым:

<div class="template_setting">
Your settings(children of template_setting)
</div>

Код Javascript / Jquery:

-Когда кто-то открывает диалоговое окно,клон потомков template_setting и добавьте в div_dialogue.

-Как вы можете иметь несколько шаблонов на одной странице (что не всегда верно).Примените пользовательское событие к идентификатору только что созданного параметра div (оставьте id каждого параметра div различным, вы можете увеличивать каждый на некоторый символ / число).

$('#dialogue_opener').click(function(event){
 $('.template_setting').children().clone().appendTo(div_dialogue)
 .trigger('adjustSettingID');

Answer 4

Я обычно видел, что рендеринг из JavaScript чертовски быстр.Я создал много «точно в срок» меню, сеток и форм, и пользователи не могут заметить разницу.Приятно то, что вам не нужно поддерживать текущую форму, просто выбросить ее и настроить все по умолчанию на данные вашего объекта настроек.Делает для более чистого кода на мой взгляд.

Answer 5

Рассмотрим гибридное решение. Загрузите div "settings" после того, как страница будет готова. Таким образом, пользователь не будет чувствовать дополнительные «расходы», и , к которым у вас будет готов div, когда вам это нужно.