В чем разница между тегами <script>, <script async> и <script defer>?

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

Стандартный <script> останавливает парсинг HTML, загружает скрипт и исполняет его, затем парсинг продолжается.

<script async> загружает скрипт асинхронно, пока парсинг HTML продолжается. Скрипт исполняется сразу после загрузки. Порядок исполнения не гарантирован.

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

Сравнительная таблица:

Атрибут	Парсинг HTML во время загрузки скрипта	Исполнение скрипта	Сохранение порядка исполнения
Нет	Пауза	Сразу после загрузки	Да
`async`	Продолжается	Сразу после загрузки (может прервать парсинг)	Нет
`defer`	Продолжается	После завершения парсинга HTML	Да

Пример:`

<!-- Обычный скрипт - блокирует парсинг -->
<script src="script1.js"></script>

<!-- Асинхронный скрипт - не блокирует парсинг, исполнение сразу после загрузки -->
<script src="script2.js" async></script>

<!-- Отложенный скрипт - не блокирует парсинг, исполнение после парсинга HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Исполнится после script3.js -->