В чем разница между подключением скриптов script, script async и script defer

<script> — блокирует парсинг HTML до загрузки и выполнения скрипта. Исполняется немедленно при встрече в документе.

<script async> — загружается асинхронно параллельно с парсингом HTML. Как только загрузился — сразу выполняется, при этом парсинг приостанавливается. Порядок выполнения не гарантирован.

<script defer> — загружается асинхронно, но выполняется только после полного парсинга HTML, перед событием DOMContentLoaded. Сохраняет порядок подключения скриптов.

Пример:

<script src="1.js"></script> <!-- блокирует -->
<script async src="2.js"></script> <!-- может выполниться раньше 3.js -->
<script defer src="3.js"></script> <!-- выполнится после DOM -->

Оптимально:

• defer для скриптов, зависящих от DOM
• async для независимых скриптов (аналитика)
• обычный <script> в конце body, если важна совместимость