Чем отличаются обычный script, script с async и script с defer? Если на странице несколько тегов script, в каком порядке они загрузятся и выполнятся?

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

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

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