Расскажи про атрибуты async и defer при подключении скриптов: в чём разница, когда блокируется парсинг HTML?

Атрибуты async и defer используются для управления загрузкой и выполнением внешних скриптов в HTML:

• async

  • Скрипт загружается асинхронно параллельно с парсингом HTML.
  • Как только скрипт загружен, парсинг HTML прерывается, и скрипт выполняется сразу.
  • После выполнения парсинг продолжается.
  • Скрипты с async выполняются в порядке загрузки, не гарантируется порядок.

• defer

  • Скрипт загружается асинхронно параллельно с парсингом HTML.
  • Выполнение скрипта откладывается до тех пор, пока весь HTML не будет полностью распарсен.
  • Скрипты с defer выполняются в том порядке, в котором они объявлены.

Когда блокируется парсинг HTML?

• Без async/defer: при встрече <script src=...> парсинг останавливается, скрипт загружается и выполняется, затем парсинг продолжается.
• С async: парсинг не блокируется при загрузке, но блокируется во время выполнения скрипта.
• С defer: парсинг не блокируется ни при загрузке, ни при выполнении, скрипт выполняется после полного парсинга.

Используйте defer для скриптов, которые зависят от DOM, и async для независимых скриптов, например аналитики.