Javascript против HTML (который занимает больше времени для загрузки)

Question

Что бы мне было лучше иметь более длинный Javascript или более длинный HTML Мало что- 1. Меня не волнует рейтинг SEO. 2. Меня волнует скорость работы сайта. 3. Я забочусь о функциональности веб-сайта.

В основном мой вопрос к основным кодировщикам. Что лучше -

<div> Blah blah blah blah </div>

или

document.getElementById("blah").innerHTML = "Blah blah blah blah"

? Любые дополнительные знания всегда приветствуются :). Спасибо.

Answer 1

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

Даже если вы игнорируете тот факт, что браузер должен выполнять больше работы при манипулировании DOM через Javascript, просто подумайте о том, какая загрузка займет больше времени:

30 символов:

<div>Blah Blah Blah Blah</div>

или 50+ символов (лень считать):

<script>
    document.getElementById("blah").innerHTML = "Blah Blah Blah Blah";
</script>

Итак, следуя по пути JavaScript, вы одновременно загружаете больше контента с сервера и просите браузер проделать дополнительную работу по визуализации страницы.

Answer 2

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

Например, у вас может быть просто базовый html-скелет с заполнителем содержимого, который затем загружает фактические данные черезAjax Call.Поскольку первоначальный рендеринг будет происходить очень быстро, пользователь будет воспринимать, что сайт загружается очень быстро.Фактическое / общее время будет больше, но, поскольку сайт Bast быстро рендерится, компромисс может стоить того.

Answer 3

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

Причины, по которым вы захотите использовать Javascript, сделают вопрос спорным.Вы будете использовать Javascript для вещей, которые нельзя было сделать в исходном HTML-выводе.

Answer 4

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

Answer 5

HTML всегда будет отображаться быстрее.

Потенциальные проблемы использования JavaScript, как вы описали:

1. JavaScript требует времени для выполнения.
2. Вам нужно подождать, пока элемент будет создан, прежде чем вы сможете получить к нему доступ с помощью JavaScript.
3. Если JavaScript находится в отдельном файле, это будет дополнительная передача HTTP туда и обратно на сервер.
4. Если у пользователя отключен JavaScript, он его вообще не увидит.
5. JavaScript-код также немного больше, поэтому для передачи снова потребуется больше времени.
6. Есть также проблемы с доступностью (у программ чтения с экрана могут быть проблемы).
7. innerHTML не является стандартным JavaScript, поэтому некоторые браузеры могут не выполнять его правильно.

Answer 6

Хотя ответ Джастина Нисснера в основном правильный, я бы добавил, что фактическая скорость загрузки сайта, а также восприятие пользователем скорости сайта может зависеть от многих факторов. факторов. Рассмотрим:

• Количество данных, переданных с сервера в браузер.
• Количество HTTP-запросов для загрузки одной страницы.
• Издержки, вызванные пробелами, не минимизированными JavaScripts, не минимизированными стилями CSS.
• Неоптимизированные изображения.
• Динамическое и статическое построение страницы.
• Размещение логики представления на сервере, а не в браузере.

и т.д.

Answer 7

<div> Blah blah blah blah </div>

Быстрее, поскольку другой код неполон, он должен быть:

$(document).ready(function() {   // Using jQuery here, since creating a pure
                                 // JS DOM ready is a pain.
                                 // window.onload is fired later.
    document.getElementById("blah").innerHTML = "Blah blah blah blah";
}

Таким образом, к тому времени, когда JS начинает работать, DOM готов, и это по сути означает, чтотекст отрисовывается.

и, конечно, это абсолютно не соревнование, если вы используете:

window.onload = function() { ...

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

Answer 8

HTML будет быстрее, если только по какой-то другой причине вам все равно придется отправлять точное количество байтов для символов, которые вы хотите отобразить, ПЛЮС дополнительные символы для javascript, чтобы развернуть его и отобразить на странице , Теперь, если вы планируете использовать javascript для последующего добавления элементов на страницу через AJAX, то лучше отправить данные в виде JSON и назначить их HTML-элементам.