Ответ
Да, подключение скриптов блокирует рендеринг страницы по умолчанию. Браузер останавливает парсинг HTML до момента загрузки и выполнения скрипта.
Чтобы избежать блокировки, используйте атрибуты:
async- скрипт загружается асинхронно и выполняется сразу после загрузки, не блокируя рендерингdefer- скрипт загружается асинхронно, но выполняется после полного парсинга HTML
Пример:
<script src="script.js" async></script> <!-- Не блокирует рендеринг -->
<script src="script.js" defer></script> <!-- Выполнится после DOMContentLoaded -->Для критически важного кода лучше использовать defer, чтобы сохранить порядок выполнения. async подходит для независимых скриптов (аналитика, реклама).
Ответ 18+ 🔞
Да ты посмотри, какая дичь творится! Берёшь ты обычный скрипт, суёшь его в <head>, а он, блядь, как слон в посудной лавке — весь рендеринг страницы встаёт колом, пока этот файл не скачается и не отработает! Браузер тупо замирает и ждёт, как идиот. Пиздец, да?
Ну а как иначе, спрашивается? А вот так, ёпта! Есть два волшебных пинка, которые этому слону в жопу дадут:
async— это типа «качайся, сука, в фоне, но как только загрузился — сразу впердоливайся в выполнение». Порядок? Какой, нахуй, порядок? Кто первый встал — того и тапки. Для аналитики и прочей рекламной хуйни — самое то.defer— это поумнее. «Качайся спокойно, браток, не мешай HTML строиться, а выполнишься ты у меня тогда, когда весь документ уже готов будет». И что главное — порядок скриптов сохраняется, ёбаный в рот! Для всего важного, что от DOM зависит — идеально.
Смотри, как красота выглядит:
<script src="analytics.js" async></script> <!-- Насрал и забыл, порядок не важен -->
<script src="main.js" defer></script> <!-- Выполнится аккуратненько после всей разметки -->Вот и вся магия, блядь. Не усложняй, а то мозги набекрень.