V čem spočívá rozdíl v chodu režimů (async, defer nebo type) tagu <script>?

<script> bez atributů

• HTML se analyzuje až do značky <script>.
• Analýza HTML je pozastavena při detekci značky <script>.
• Skript se načte.
• Skript se spustí.
• Analýza HTML pokračuje po spuštění skriptu.

<script async>

• HTML se analyzuje současně s načítáním skriptu.
• Analýza HTML je pozastavena po dokončení načítání skriptu.
• Skript se spustí.
• Analýza HTML pokračuje po spuštění skriptu.
• Pořadí spuštění skriptů s async není garantováno, závisí na rychlosti načítání.

<script defer>

• HTML se analyzuje současně s načítáním skriptu.
• Skript se spustí po dokončení analýzy HTML, ale před událostí DOMContentLoaded.
• Pořadí spuštění skriptů s defer je garantováno, odpovídá pořadí v HTML.
• Chování je podobné <script>, který je umístěn před uzavíracím tagem </body>.

<script type="module"> (pro ECMAScript moduly)

• Je zpracován jako <script defer> (odložené spuštění po analýze, zachování pořadí).
• Může být použit s atributem async.
• Podporuje import/export modulů. Vytváří samostatný scope.

Atribut	Načítání skriptu	Spuštění skriptu	Blokování analýzy HTML	Pořadí spuštění
Žádný	Blokující	Blokující	Ano	Zachovává se
async	Neblokující (paralelní)	Neblokující (po dokončení načítání)	Ne	Není garantováno
defer	Neblokující (paralelní)	Neblokující (po analýze HTML)	Ne	Zachovává se
type="module"	Neblokující (paralelní)	Neblokující (po analýze HTML, výchozí)	Ne	Zachovává se (výchozí)

// Příklad jednoduchého skriptu
console.log('Normální skript');

// Příklad asynchronního skriptu
console.log('Asynchronní skript');

// Příklad odloženého skriptu
console.log('Odložený skript');

// Příklad modulu
import { someFunction } from './module.js';
someFunction();
console.log('Modul skript');