Mi a különbség a <script>, <script async> és a <script defer> tagek között?

A szabványos <script> megállítja a HTML elemzést, betölti a szkriptet és végrehajtja, majd az elemzés folytatódik.

<script async> aszinkron módon tölti be a szkriptet, miközben a HTML elemzés folyamatban van. A szkript azonnal végrehajtódik a betöltés után. A végrehajtási sorrend nem garantált.

<script defer> aszinkron módon tölti be a szkriptet, miközben a HTML elemzés folyamatban van. A szkript csak a HTML elemzés befejezése után, de a DOMContentLoaded esemény előtt kerül végrehajtásra. A defer-rel betöltött szkriptek végrehajtási sorrendje megmarad a HTML-ben való megjelenésük szerint.

Összehasonlító táblázat:

Tulajdonság	HTML elemzés a szkript betöltése közben	Szkript végrehajtása	Végrehajtási sorrend megőrzése
Nincs	Megállítja	Azonnal a betöltés után	Igen
async	Folytatódik	Azonnal a betöltés után (megtörheti az elemzést)	Nem
defer	Folytatódik	A HTML elemzés befejezése után	Igen

Példa:

<!-- Normál szkript - blokkolja az elemzést -->
<script src="script1.js"></script>

<!-- Aszinkron szkript - nem blokkolja az elemzést, a betöltés után azonnal végrehajtódik -->
<script src="script2.js" async></script>

<!-- Késleltetett szkript - nem blokkolja az elemzést, az HTML elemzés után hajtódik végre -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- a script3.js után fog végrehajtódni -->