Kāda ir atšķirība starp <script>, <script async> un <script defer> tagiem?

Standarta <script> tags apstādinās HTML analīzi, ielādēs skriptu un to izpildīs, pēc tam analīze turpinās.

<script async> ielādē skriptu asīnhroni, kamēr turpinās HTML analīze. Skripts tiek izpildīts nekavējoties pēc ielādes. Izpildes secība nav garantēta.

<script defer> ielādē skriptu asīnhroni, kamēr turpinās HTML analīze. Skripts tiek izpildīts tikai pēc HTML analīzes pabeigšanas, bet pirms DOMContentLoaded notikuma. defer ar ielādētie skripti tiek saglabāti to parādīšanās secībā HTML.

Salīdzinoša tabula:

Īpašība	HTML analīze notiek skripta ielādes laikā	Skripta izpilde	Saglabā izpildes secību
Nav	Apstājas	Nekavējoties pēc ielādes	Jā
async	Turpina	Nekavējoties pēc ielādes (var pārtraukt analīzi)	Nē
defer	Turpina	Pēc HTML analīzes pabeigšanas	Jā

Piemērs:

<!-- Parasts skripts - bloķē analīzi -->
<script src="script1.js"></script>

<!-- Asinhronais skripts - nebloke analīzi, izpildās nekavējoties pēc ielādes -->
<script src="script2.js" async></script>

<!-- Aizkavētais skripts - nebloke analīzi, izpildās pēc HTML analīzes -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- Tiks izpildīts pēc script3.js -->