Mis on erinevus <script> märgise režiimide (async, defer või type) töös?

<script> ilma atribuutid

• HTML töödeldakse kuni <script> märgini.
• HTML töödeldakse peatub, kui avastatakse <script> märg.
• Skript laaditakse.
• Skript täidetakse.
• HTML töödeldakse uuesti pärast skripti täitmist.

<script async>

• HTML töödeldakse paralleelselt skripti laadimisega.
• HTML töödeldakse peatub pärast skripti laadimise lõpetamist.
• Skript täidetakse.
• HTML töödeldakse uuesti pärast skripti täitmist.
• async-iga skriptide täitmise järjekord ei ole garanteeritud, see sõltub laadimise kiirusest.

<script defer>

• HTML töödeldakse paralleelselt skripti laadimisega.
• Skript täidetakse pärast HTML töödeldamise lõpetamist, kuid enne DOMContentLoaded sündmust.
• defer-iga skriptide täitmise järjekord on garanteeritud, see vastab nende asukohale HTML-is.
• Käitumine on sarnane <script>, mis asub </body> sulguva sildi ees.

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

• Töötleb nagu <script defer>, vaikimisi (viivitusega täitmine pärast töötlemist, järjekorra säilitamine).
• Võib kasutada koos async-iga.
• Toetab moodulite importi/exporti. Loob eraldi vahemiku (scope).

Atribuut	Laadimine	Täitmine	HTML töödeldamise blokeerimine	Järjekord
Puudub	Blokeeriv	Blokeeriv	Jah	Säilitatakse
async	Mitte-blokeeriv (paralleelne)	Mitte-blokeeriv (pärast laadimist)	Ei	Ei garanteerita
defer	Mitte-blokeeriv (paralleelne)	Mitte-blokeeriv (pärast HTML töötlemist)	Ei	Säilitatakse
type="module"	Mitte-blokeeriv (paralleelne)	Mitte-blokeeriv (pärast HTML töötlemist, vaikimisi)	Ei	Säilitatakse (vaikimisi)

// Näide lihtsast skriptist
console.log('Lihtne skript');

// Asünkroonne skript
console.log('Asünkroonne skript');

// Viivitatud skript
console.log('Viivitatud skript');

// Moodul
import { someFunction } from './module.js';
someFunction();
console.log('Mooduli skript');