Простой HTML против Javascript генерируется HTML?

Question

В моем веб-приложении я бы хотел избежать html и использовать только javascript для создания dom-дерева веб-страницы.

Что быстрее пишет веб-контент традиционным способом в формате html <div>Some text</div> или использует javascript dom render, например: div.appendChild(document.createTextNode("Some text"));?

Answer 1

Придерживайтесь традиционного HTML. Это не только быстрее, чем делать все с Javascript, но и гораздо более удобен в обслуживании.

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

Answer 2

Скорость - это второстепенное значение для правильности, то есть сначала выполняйте функциональные требования, а затем ускоряйте их там, где это необходимо (в некоторых местах это может быть уже достаточно быстро).

В этом случае решение использовать статическую разметку вместо JavaScript - это вопрос о том, кто потребляет ваш документ - только пользователи с включенным JavaScript? Если так, это не имеет большого значения. Нужно ли принимать во внимание поисковые системы? Пользователи с ограниченными возможностями? Тонкие клиенты, которые не имеют полной поддержки JS, или параноидальные пользователи с отключенной JS? Во всех этих последних случаях единственный правильный путь - иметь семантическую разметку, не загроможденную лишними элементами и улучшенную с помощью JavaScript.

Answer 3

Традиционный подход будет быстрее, потому что браузер должен только загружать, интерпретировать и отображать. Предлагаемый вами подход заставит браузер загружать, интерпретировать, изменять * n раз, а затем отображать.

Это все, что касается рендеринга.

Что касается удобства обслуживания, вы создаете кошмар. Это ключ к развитию. Количество ночных кошмаров в ремонтопригодности пропорционально «качеству» кода, ИМХО. Производительность и оптимизация должны быть на втором месте после удобства обслуживания. (Конечно, есть исключения. Ничто не черно-белое).

HTML был создан, чтобы быть выразительным языком. Javascript не было. Конец истории, на мой взгляд.

Answer 4

В прошлом я уже пытался сделать 100% встроенный компонент JavaScript для чата ajax. Оказалось, что это было менее обслуживаемо, требовало больше времени для написания кода, и преимущество было очень тонким, даже жестким, вероятно, это проект, который мог бы извлечь большую выгоду из этого подхода DOM на JavaScript.

Даже если вы думаете, что может быть преимущество, это не так. Придерживайтесь чистого HTML.

Answer 5

HTML (шаблонизатор) обычно считается более интуитивным, модульным и обслуживаемым подходом для манипулирования DOM.

Несколько мест, с которых можно начать:

jQuery Templating Engine: jQuery шаблонизаторы

Шаблоны закрытия Google http://code.google.com/closure/templates/

Answer 6

Мне интересно, что вы подумаете о создании документа исключительно через Javascript. На самом деле создавать элементы быстрее, используя свойство DOM и document.createElement, чем .innerHTML. Этот метод создает объекты документа напрямую, в то время как использование innerHTML требует, чтобы анализатор перебрал HTML-код и создал элементы.

С другой стороны, использование Javascript вместо непосредственного написания HTML-кода потребует анализа и выполнения Javascript, создавая дополнительные издержки над анализатором HTML.

Answer 7

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

Answer 8

Традиционный способ намного быстрее, пользователь загружает файл, он там, анализируется и выполняется.

Если вы делаете JS так, как страница должна быть построена на стороне клиента, КАЖДЫЙ раз, когда они загружают страницу.

Это просто ужасный способ построить страницу ИМХО и кошмар для управления / обновления / создания

Answer 9

HTML анализируется и генерируется браузером, а затем вводится в DOM. Использование javascript для манипулирования dom по частям более затратно.

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

Answer 10

Как и вам, мне было интересно то же самое, и я провел такой же тест, как и @evilReiko:

Чтобы отобразить страницу, содержащую таблицу с 1000000000 записей, я нашел следующие результаты:

• статический HTML-файл: размер файла 32 МБ, время загрузки страницы 2,8 мин.
• статический HTML-файл с минимизированным содержимым: размер файла 12 МБ, время загрузки страницы 1,3 мин.
• динамический HTML-файл, созданныйJS: размер файла 612 байт (+ 713 байт JS), время загрузки страницы 10,09 секунд ...