Kuo skiriasi <script> žymės režimų (async, defer ar type) veikimas?

<script> be atributų

• HTML apdorojamas iki <script> žymės.
• HTML apdorojimas sustabdomas, kai aptinkama <script> žymė.
• Skriptas įkeliama.
• Skriptas vykdomas.
• HTML apdorojimas atnaujinamas po skripto vykdymo.

<script async>

• HTML apdorojamas paraleliai su skripto įkėlimu.
• HTML apdorojimas sustabdomas po skripto įkėlimo pabaigos.
• Skriptas vykdomas.
• HTML apdorojimas atnaujinamas po skripto vykdymo.
• async skriptų vykdymo tvarka nėra garantuota, priklauso nuo įkėlimo greičio.

<script defer>

• HTML apdorojamas paraleliai su skripto įkėlimu.
• Skriptas vykdomas po HTML apdorojimo pabaigos, bet prieš DOMContentLoaded įvykį.
• defer skriptų vykdymo tvarka yra garantuota, atitinka jų išdėstymą HTML.
• Elgsena panaši į <script>, kuris yra prieš uždarantį </body> žymę.

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

• Apdorojama kaip <script defer> pagal numatytąją reikšmę (atidėtas vykdymas po apdorojimo, išlaikant tvarką).
• Gali būti naudojama su async atributu.
• Palaiko modulinių importų/eksportų funkcionalumą. Sukuria atskirą matymo sritį (scope).

Atributas	Įkėlimas	Vykdymas	HTML apdorojimo blokavimas	Tvarka
Nėra	Blokuojantis	Blokuojantis	Taip	Išlaikoma
async	Nebaido (paralelinis)	Nebaido (po įkėlimo)	Ne	Garantijos nėra
defer	Nebaido (paralelinis)	Nebaido (po HTML apdorojimo)	Ne	Išlaikoma
type="module"	Nebaido (paralelinis)	Nebaido (po HTML apdorojimo, pagal numatytąją)	Ne	Išlaikoma (pagal numatytąją)

// Pavyzdinis paprastas skriptas
console.log('Paprastas skriptas');

// Asinchroninis skriptas
console.log('Asinchroninis skriptas');

// Atidėtas skriptas
console.log('Atidėtas skriptas');

// Modulis
import { someFunction } from './module.js';
someFunction();
console.log('Modulio skriptas');