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

Question

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

В основном мой вопрос для ядра coders- Что лучше -

<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 будет быстрее, потому что javascript требует добавления дополнительных байтов в браузер для добавления текста в элемент. Кроме того, Javascript требует дополнительных сценариев и функций накладных расходов, чего не будет много, но для крупных сайтов он будет медленнее.

Answer 3

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

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

Answer 4

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

Answer 5

<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 6

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

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

т.д.

Answer 7

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

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

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

Answer 8

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

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