V čom spočíva rozdiel v práci režimov (async, defer alebo type) tagu <script>?

<script> bez atribútu

• HTML sa spracúva až do <script> tagu.
• Spracovanie HTML sa pozastaví pri zistení <script> tagu.
• Načítanie skriptu prebieha.
• Spustenie skriptu prebieha.
• Spracovanie HTML sa obnoví po vykonaní skriptu.

<script async>

• HTML sa načítava paralelne s načítaním skriptu.
• Spracovanie HTML sa pozastaví po dokončení načítania skriptu.
• Skript sa vykoná.
• Spracovanie HTML sa obnoví po vykonaní skriptu.
• Poradie vykonávania async skriptov nie je garantované, závisí od rýchlosti načítania.

<script defer>

• HTML sa načítava paralelne s načítaním skriptu.
• Skript sa vykoná po dokončení spracovania HTML, ale pred udalosťou DOMContentLoaded.
• Poradie vykonávania defer skriptov je garantované, zodpovedá poradiu v HTML.
• Správanie je podobné <script>, ktorý je umiestnený pred zatváracím tagom </body>.

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

• Spracováva sa ako <script defer> podľa predvoleného nastavenia (odložené vykonanie po spracovaní, zachovanie poradia).
• Môže sa použiť s atribútom async.
• Podporuje import/export modulov. Vytvára samostatný scope.

Atribút	Načítanie skriptu	Vykonanie skriptu	Blokovanie spracovania HTML	Poradie vykonávania
Žiadny	Blokujúce	Blokujúce	Áno	Zachované
async	Neblokujúce (paralelné)	Neblokujúce (po načítaní)	Nie	Nie je garantované
defer	Neblokujúce (paralelné)	Neblokujúce (po spracovaní HTML)	Nie	Zachované
type="module"	Neblokujúce (paralelné)	Neblokujúce (po spracovaní HTML, podľa predvoleného)	Nie	Zachované (podľa predvoleného)

// Príklad jednoduchého skriptu
console.log('Obyčajský skript');

// Príklad asynchrónneho skriptu
console.log('Asynchrónny skript');

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

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