Mi a különbség az <script> címke módjainak (async, defer vagy type) működésében?

<script> attribútum nélkül

• A HTML a <script> címkéig elemzi.
• A HTML elemzés szünetel a <script> címke észlelésekor.
• A script betöltődik.
• A script fut.
• A HTML elemzés folytatódik a script futtatása után.

<script async>

• A HTML egyidejűleg elemzi a script betöltésével.
• A HTML elemzés szünetel a script betöltésének befejezéséig.
• A script fut.
• A HTML elemzés folytatódik a script futtatása után.
• Az async-val ellátott script futási sorrendje nem garantált, a betöltési sebességtől függ.

<script defer>

• A HTML egyidejűleg elemzi a script betöltésével.
• A script fut, miután a HTML elemzés befejeződött, de még az DOMContentLoaded esemény előtt.
• A defer-rel ellátott script futási sorrendje garantált, megfelel a HTML-ben való megjelenés sorrendjének.
• Viselkedése hasonló a <script>-hez, amelyet a </body> zárótag előtt helyeztek el.

<script type="module"> (ECMAScript modulok)

• Alapértelmezés szerint <script defer>-ként kezelik (késleltetett futás, sorrend megtartása).
• Használható az async attribútummal.
• Támogatja a modulok import/export funkcióit. Külön scope-ot hoz létre.

Attribútum	Script betöltése	Script futtatása	HTML elemzés blokkolása	Futtatási sorrend
Nincs	Blokkoló	Blokkoló	Igen	Megtartva
async	Nem blokkoló (párhuzamos)	Nem blokkoló (a betöltés befejezése után)	Nem	Nem garantált
defer	Nem blokkoló (párhuzamos)	Nem blokkoló (HTML elemzés után)	Nem	Megtartva
type="module"	Nem blokkoló (párhuzamos)	Nem blokkoló (HTML elemzés után, alapértelmezett)	Nem	Megtartva (alapértelmezett)

// Egyszerű script példa
console.log('Normál script');

// Aszinkron script példa
console.log('Aszinkron script');

// Késleltetett script példa
console.log('Késleltetett script');

// Modul példa
import { someFunction } from './module.js';
someFunction();
console.log('Modul script');