В чем разница подключения js в head или body?

Question

[eantava]

Видел как люди подключали js, как внешний так и внутренний. Некоторые подключали script в head, некоторые в конце body. Есть ли вообще разница?

Answer 1

[Павел Антонов]

Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.

Если браузер видит тег,
<script>
то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.

Если вставить скрипт в head, то пока он не выполнится мы не увидим отрисовку body. Если скрипт большой и ресурсоемкий, то мы будем наблюдать белую страницу на сайте.
Поэтому лучше выносить скрипты в конец документа перед закрывающим body.

Если же мы осознанно хотим скрывать содержимое пока не отработают нужные скрипты, то имеет смысл их разместить в head

Comments

[ForSureN1]

забыли упомянуть про async/await :)

Answer 2

[OLSER333]

Советую атрибуты async и defer у script, т.к. они позволят не блокировать загрузку html, и в случая async - запускаться в тот момент, когда загрузятся, а в случае defer - они будут загружены до события DOMContentLoaded.
Если мешает белая страница в начале - сделайте preloader )