💡 Коротко разница:
1️⃣ Обычный <script src="...">
Блокирует чтение HTML. Браузер видит скрипт, останавливает загрузку страницы, скачивает его, выполняет, и только потом строит сайт дальше. Привет, тормоза.
2️⃣ <script async src="...">
Загружается параллельно с HTML. Как только скачался — HTML замирает, и скрипт выполняется. Отлично подходит для независимых вещей: метрики, аналитика, пиксели соцсетей.
3️⃣ <script defer src="...">
Загружается в фоновом режиме, вообще не мешая HTML. Выполняется строго после того, как вся страница полностью загрузилась. Идеально для основного кода твоего приложения.
⚡ Как делать правильно:
<head>
<!-- Основная логика сайта: загрузится в фоне, выполнится вовремя -->
<script defer src="app.js"></script>
<!-- Яндекс.Метрика или Google Analytics: не ждет никого -->
<script async src="analytics.js"></script>
</head>
