Na czym polega różnica w działaniu trybów (async, defer lub type) tagu <script>?

<script> bez atrybutów

• HTML jest analizowany do momentu napotkania tagu <script>.
• Analiza HTML jest wstrzymywana po wykryciu tagu <script>.
• Skrypt jest ładowany.
• Skrypt jest wykonywany.
• Analiza HTML jest wznawiana po wykonaniu skryptu.

<script async>

• HTML jest analizowany równocześnie z ładowaniem skryptu.
• Analiza HTML jest wstrzymywana po zakończeniu ładowania skryptu.
• Skrypt jest wykonywany.
• Analiza HTML jest wznawiana po wykonaniu skryptu.
• Kolejność wykonywania skryptów z async nie jest gwarantowana, zależy od szybkości ładowania.

<script defer>

• HTML jest analizowany równocześnie z ładowaniem skryptu.
• Skrypt jest wykonywany po zakończeniu analizy HTML, ale przed zdarzeniem DOMContentLoaded.
• Kolejność wykonywania skryptów z defer jest gwarantowana, odpowiada kolejności w HTML.
• Zachowanie podobne do <script> umieszczonego przed zamknięciem tagu </body>.

<script type="module"> (dla modułów ECMAScript)

• Traktowany jak <script defer> domyślnie (opóźnione wykonanie po analizie, zachowuje kolejność).
• Może być używany z atrybutem async.
• Obsługuje import/export modułów. Tworzy osobny zakres (scope).

Atrybut	Ładowanie skryptu	Wykonanie skryptu	Blokada analizy HTML	Kolejność wykonania
Brak	Blokujące	Blokujące	Tak	Zachowuje się
async	Nieblokujące (równoległe)	Nieblokujące (po zakończeniu ładowania)	Nie	Nie gwarantowane
defer	Nieblokujące (równoległe)	Nieblokujące (po analizie HTML)	Nie	Zachowuje się
type="module"	Nieblokujące (równoległe)	Nieblokujące (po analizie HTML, domyślnie)	Nie	Zachowuje się (domyślnie)

// Przykład prostego skryptu
console.log('Zwykły skrypt');

// Przykład asynchronicznego skryptu
console.log('Asynchroniczny skrypt');

// Przykład opóźnionego skryptu
console.log('Opóźniony skrypt');

// Przykład modułu
import { someFunction } from './module.js';
someFunction();
console.log('Skrypt modułowy');