Каква е разликата в работата на режимите (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 модули)

• Обработва се като <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('Модул скрипт');