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