Размещение **<script>** прямо перед **</body>**
Теги <script> блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.
Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <script> будет расположен внутри <head>, является добавление атрибута defer.
Хорошей практикой считается располагать элементы link для подключения CSS стилей внутри тэга head, а элементы script для подключения JavaScript кода ставить перед закрывающимся тэгом body по нескольким причинам:
- Улучшение производительности: Когда браузер загружает страницу, он начинает ее отображение, когда получает первый кусок HTML-кода. Если CSS-стили находятся внутри тэга
head, браузер может начать отображать страницу, даже если он еще не загрузил все стили. Если JavaScript код находится перед закрывающим тэгомbody, он может быть загружен после того, как основная часть страницы уже отображена, что ускоряет первоначальный загрузку страницы. - Читабельность кода: Размещение элементов
linkиscriptв соответствующих секцияхheadиbodyсоответственно делает HTML-код более читабельным и понятным. Разработчики могут быстро понять, какие файлы стилей и скриптов используются на странице, и легко найти их в коде. - Семантичность: Размещение элементов
linkиscriptв соответствующих секцияхheadиbodyсоответственно является более семантически правильным. Это означает, что код более явно указывает, какие файлы стилей и скриптов относятся к странице и на каких участках страницы они будут использоваться. - Улучшенная кросс-браузерность: Некоторые старые браузеры могут не поддерживать элементы
linkиscript, если они находятся внутри других элементов. Размещение элементовlinkиscriptв соответствующих секцияхheadиbodyсоответственно гарантирует, что они будут корректно работать на всех браузерах.
Конечно, есть и другие способы подключения CSS и JavaScript кода на страницу, например, использование атрибута defer для элементов script, но размещение элементов link и script в соответствующих секциях head и body является наиболее распространенной и рекомендуемой практикой.