Kāda ir atšķirība <script> taga režīmu (async, defer vai type) darbībā?

<script> bez atribūtiem

• HTML apstrādājas līdz <script> tagam.
• HTML apstrāde tiek pārtraukta, atklājot <script> tagu.
• Skripts tiek ielādēts.
• Skripts tiek izpildīts.
• HTML apstrāde tiek atsākta pēc skripta izpildes.

<script async>

• HTML tiek apstrādāts paralēli ar skripta ielādi.
• HTML apstrāde tiek pārtraukta pēc skripta ielādes pabeigšanas.
• Skripts tiek izpildīts.
• HTML apstrāde tiek atsākta pēc skripta izpildes.
• async skriptu izpildes secība nav garantēta, tas ir atkarīgs no ielādes ātruma.

<script defer>

• HTML tiek apstrādāts paralēli ar skripta ielādi.
• Skripts tiek izpildīts pēc HTML apstrādes pabeigšanas, bet pirms DOMContentLoaded notikuma.
• defer skriptu izpildes secība ir garantēta, tā atbilst to izvietošanas secībai HTML.
• Uzvedība ir līdzīga <script>, kas izvietots pirms slēgšanas </body> taga.

<script type="module"> (ECMAScript moduļiem)

• Apstrādājas kā <script defer>, pēc noklusējuma (atliekta izpilde pēc apstrādes, saglabā secību).
• Var tikt izmantots ar async atribūtu.
• Atbalsta moduļu importu/eksportu. Izveido atsevišķu redzes lauku (scope).

Atribūts	Ielāde	Izpilde	HTML apstrādes bloķēšana	Secība
Nav	Bloķējoša	Bloķējoša	Jā	Saglabājas
async	Nav bloķējoša (paralēla)	Nav bloķējoša (pēc ielādes)	Nē	Nav garantijas
defer	Nav bloķējoša (paralēla)	Nav bloķējoša (pēc HTML apstrādes)	Nē	Saglabājas
type="module"	Nav bloķējoša (paralēla)	Nav bloķējoša (pēc HTML apstrādes, pēc noklusējuma)	Nē	Saglabājas (pēc noklusējuma)

// Vienkāršs skripta piemērs
console.log('Vienkāršs skripts');

// Asinhronais skripts
console.log('Asinhronais skripts');

// Atliktais skripts
console.log('Atliktais skripts');

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