Aký je rozdiel medzi tagmi <script>, <script async> a <script defer>?

Štandardný <script> zastaví analýzu HTML, načíta skript a spustí ho, potom analýza pokračuje.

<script async> načíta skript asynchrónne, kým pokračuje analýza HTML. Skript sa spustí ihneď po načítaní. Poradie spustenia nie je garantované.

<script defer> načíta skript asynchrónne, kým pokračuje analýza HTML. Skript sa spustí iba po dokončení analýzy HTML, ale pred udalosťou DOMContentLoaded. Poradie spustenia skriptov s defer sa zachováva podľa ich výskytu v HTML.

Porovnávacia tabuľka:

Atribút	Analýza HTML počas načítania skriptu	Spustenie skriptu	Zachovanie poradia spustenia
Žiadny	Pozastaví	Ihneď po načítaní	Áno
async	Pokračuje	Ihneď po načítaní (môže prerušiť analýzu)	Nie
defer	Pokračuje	Po dokončení analýzy HTML	Áno

Príklad:

<!-- Bežný skript - blokuje analýzu -->
<script src="script1.js"></script>

<!-- Asynchrónny skript - neblokuje analýzu, spustí sa ihneď po načítaní -->
<script src="script2.js" async></script>

<!-- Odložený skript - neblokuje analýzu, spustí sa po analýze HTML -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Bude spustený po script3.js -->