Лучший оптимизированный способ динамического заполнения HTML

Question

Каков наилучший способ визуализации HTML с помощью AJAX?

way1: изначально меньше html и больше динамического html через ajax.

way2: изначально есть больше HTML и поставить менее динамический HTML через AJAX.

например, мой HTML

<div id="div1">
   <div>
      <p id="p1">hello</p>
   </div>
<div>

путь1:

начальный HTML

<div id="div1">
</div>

динамический HTML

<div>
   <p id="p1">hello</p>
</div>

путь 2:

начальный HTML

<div id="div1">
   <div>
       <p id="p1"></p>
   </div>
</div>

динамический HTML

hello

Этот пример небольшой, но я надеюсь, что вы получаете контекст. Так что вопрос в том, что лучше для производительности переднего плана. и дополнительно браузер перерисовывает всю страницу, когда мы динамически добавляем html через javascript?

Answer 1

Это зависит от объема HTML, который вы обрабатываете на своей странице. Если вы создаете страницу с большим количеством модулей, то лучше всего следовать стилю загрузки по требованию. То есть: вначале просто получите минимальный HTML, необходимый для открытия страницы, и только когда пользователь захочет работать с любым модулем, или получить отчет и т. д., вы делаете вызов ajax и получаете только необходимый контент.

Это также означает, что вы не будете загружать свои скрипты и CSS, которые будут работать с будущими элементами HTML на начальной странице, хранить все ваши ссылки на внешние файлы в отдельном HTML (частичной странице) и через ajax получать только эту страницу. Таким образом, вы будете загружать HTML, его скрипты и CSS по требованию.

И на ваш вопрос

браузер перерисовывает всю страницу, когда мы динамически добавляем HTML через JavaScript?.

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

Answer 2

Это зависит от регистра (как всегда;)), но с AJAX вы должны получать / получать только необходимые значения, в HTML у вас должны быть все необходимые вам теги (какой-то шаблон), а затем просто помещать туда значения, полученные из запроса или другого измененные данные с помощью JavaScript.