Самый эффективный способ построить HTML из данных и поместить их на страницу
Я пытаюсь понять наиболее эффективный способ преобразования данных в HTML и, конечно же, получить их на странице.
Небольшое упрощение ситуации состоит в том, что каждая "строка" данных в хранилище объектов indexedDB представляет один полный набор HTML для просмотра, что означает, что он содержит инструкции для построения каждого из пяти отдельных контейнеров деления в макете шаблона на веб-странице., Вся страница не заменяется, только ее часть. Данные не содержат файлов или сериализации элементов, но могут содержать исходное местоположение изображения, PDF, видео и т. Д., В дополнение к текстовому содержимому.
Я могу построить то, что необходимо, но хотел бы знать, какой подход к этому является наилучшим.
Это более эффективно:
Создайте пять строк HTML и установите
innerHTMLкаждого контейнера.Создайте пять фрагментов документа, каждый с внешним разделением, и установите
innerHTMLкаждого подразделения, а затем вставьте каждый фрагмент в свой контейнер как дочерний узел.Создайте пять фрагментов документа, создавая каждый узел по отдельности, устанавливая стили, текстовое содержимое и источники каждого из них, а затем вставляйте каждый фрагмент в свой контейнер как дочерний узел.
Сделайте что-то похожее на пункт 3, но соберите все пять в одну игру; поэтому, другими словами, создайте ближайший родительский контейнер, содержащий эти пять разделов на странице, и замените его в одном шаге от фрагмента.
Я не понимаю, какая работа больше подходит для браузера: установка innerHTML в строку или построение узла за узлом, установка стилей и содержимого во фрагменте. Я понимаю, что одна вставка лучше, чем пять, но не знаю, проще ли для браузера создать ближайший родительский элемент, чем пять компонентов.
Кроме того, пользователь может нажать Next или же Previous кнопка для навигации по пунктам. Предположим, что пользователь хочет перейти от пункта 2 к пункту 10, и вместо того, чтобы просто выбрать элемент 10 непосредственно, он решает быстро щелкнуть Next восемь раз подряд. Как это следует обрабатывать в этом сценарии, чтобы не создавать семь промежуточных представлений?
Спасибо за рассмотрение моего вопроса.
ОБНОВИТЬ:
Не имея большого опыта работы с контентом веб-страницы, я был очень удивлен, экспериментируя с тем, насколько быстро можно создавать фрагменты документа, добавлять к ним узлы, а затем вставлять фрагменты в DOM.
Работая с полусложным горизонтальным макетом с несколькими разделами, которые прокручиваются по вертикали, разделы могут быть извлечены и повторно собраны во фрагменте и возвращены на страницу так быстро, что страница может переключаться между горизонтальным макетом рядом друг с другом для Широкие экраны с вкладками для экрана ноутбука "мгновенно". Никаких прыжков или рывков вообще.
Это переключение является гораздо более сложным, чем мой первоначальный вопрос, поскольку оно включает в себя операцию, которая происходит только в одном из этих разделов.
Я был обеспокоен тем, что подход к фрагменту документа будет медленным, особенно потому, что я работаю с расширением и читаю, что использование innerHTML или insertAdjacentHTML может привести к тому, что расширение не будет одобрено / подписано для распространения. Но это работает очень быстро.
Итак, я не нашел никаких проблем с этим. Это может включать в себя немного больше строк кода, но, по крайней мере, в моем случае, легче следовать, чем создавать строку HTML. Я до сих пор не знаю, что проще для самого браузера, но "работа" по созданию HTML-строк может быть больше, чем любая разница в этих подходах к вводу HTML-кода на страницу.