Какая разница между <script>, <script async> и <script defer>?

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

sobes.tech AI

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

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

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

Атрибут	Парсинг HTML	Загрузка скрипта	Выполнение скрипта	Зависимость от порядка
`<script>`	Приостанавливается	Блокирует	Блокирует	Да
`<script async>`	Продолжается	Не блокирует	Не блокирует	Нет
`<script defer>`	Продолжается	Не блокирует	Не блокирует	Да

Пример:

<script src="script1.js"></script>
<script async src="script2.js"></script>
<script defer src="script3.js"></script>

<!--
  Обычный:<script src="script1.js"></script>
  Браузер парсит HTML до этого тега,
  приостанавливает парсинг, загружает script1.js,
  выполняет script1.js, потом продолжает парсинг.

  Асинхронный:<script async src="script2.js"></script>
  Браузер продолжает парсить HTML,
  загружает script2.js параллельно.
  Как только script2.js загружен, он может выполниться
  в любой момент, прерывая парсинг, перед тем как
  парсинг HTML завершится.

  Отложенный:<script defer src="script3.js"></script>
  Браузер продолжает парсить HTML,
  загружает script3.js параллельно.
  script3.js выполняется только после того как
  весь HTML полностью распарсен.
  Если есть несколько скриптов с defer, они выполнятся
  в том порядке, в котором они указаны в HTML.
-->