Middle
44
questionbank

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

Получайте ответы на вопросы в реальном времени с Sobes Copilot
Ответ от нейросети sobes.tech
  • <script>: Парсинг HTML останавливается, скрипт загружается и выполняется, затем парсинг HTML возобновляется. Блокирует рендеринг.
  • <script async>: Скрипт загружается асинхронно, параллельно с парсингом HTML. Как только скрипт загружен, парсинг HTML прерывается для выполнения скрипта, затем возобновляется. Порядок выполнения асинхронных скриптов не гарантирован.
  • <script defer>: Скрипт загружается асинхронно, параллельно с парсингом HTML. Выполнение откладывается до полного завершения парсинга HTML и построения DOM-дерева. Порядок выполнения отложенных скриптов сохраняется в соответствии с их порядком в документе.

Вот таблица, обобщающая различия:

АтрибутЗагрузкаИсполнениеБлокировка парсинга HTMLПорядок скриптов
отсутствуетСинхроннаяСразу после загрузкиДаГарантирован
asyncАсинхроннаяСразу после загрузки (если HTML еще парсится)Да (во время выполнения)Не гарантирован
deferАсинхроннаяПосле полной загрузки HTML и построения DOMНет (кроме момента выполнения, но после HTML)Гарантирован