В чем заключается разница в работе режимов (async, defer или type) тега <script>?

<script> без атрибутов

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

<script async>

• HTML парсится одновременно с загрузкой скрипта.
• Парсинг HTML приостанавливается при завершении загрузки скрипта.
• Происходит выполнение скрипта.
• Парсинг HTML возобновляется بعد выполнения скрипта.
• Порядок выполнения скриптов с async не гарантируется, зависит от скорости их загрузки.

<script defer>

• HTML парсится одновременно с загрузкой скрипта.
• Скрипт выполняется после завершения парсинга HTML, но до события DOMContentLoaded.
• Порядок выполнения скриптов с defer гарантируется, соответствует порядку их расположения в HTML.
• Поведение аналогично <script> помещенному перед закрывающим тегом </body>.

<script type="module"> (для ECMAScript Modules)

• Обрабатывается как <script defer> по умолчанию (отложенное выполнение после парсинга, сохранение порядка).
• Может использоваться с атрибутом async.
• Поддерживает импорт/экспорт модулей. Создает отдельную область видимости (scope).

Атрибут	Загрузка скрипта	Выполнение скрипта	Блокировка парсинга HTML	Порядок выполнения
Нет	Блокирующая	Блокирующее	Да	Сохраняется
async	Не блокирующая (параллельная)	Не блокирующее (по завершении загрузки)	Нет	Не гарантируется
defer	Не блокирующая (параллельная)	Не блокирующее (после парсинга HTML)	Нет	Сохраняется
type="module"	Не блокирующая (параллельная)	Не блокирующее (после парсинга HTML, по умолчанию)	Нет	Сохраняется (по умолчанию)

// Пример простого скрипта
console.log('Обычный скрипт');

// Пример асинхронного скрипта
console.log('Асинхронный скрипт');

// Пример отложенного скрипта
console.log('Отложенный скрипт');

// Пример модуля
import { someFunction } from './module.js';
someFunction();
console.log('Скрипт-модуль');