Back to questions
Middle
517
questionbank
В чем разница между тегами <script>, <script async> и <script defer>?
Sobes Copilot
Get answers in real time
Answer from AI
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 -->