Care este diferența în funcționarea modurilor (async, defer sau type) ale etichetei <script>?

<script> fără atribute

• HTML este analizat până la eticheta <script>.
• Analiza HTML este suspendată la detectarea etichetei <script>.
• Scriptul este încărcat.
• Scriptul este executat.
• Analiza HTML este reluată după executarea scriptului.

<script async>

• HTML este analizat în același timp cu încărcarea scriptului.
• Analiza HTML este suspendată la finalizarea încărcării scriptului.
• Scriptul este executat.
• Analiza HTML este reluată după executarea scriptului.
• Ordinea de execuție a scripturilor cu async nu este garantată, depinde de viteza de încărcare.

<script defer>

• HTML este analizat în același timp cu încărcarea scriptului.
• Scriptul se execută după finalizarea analizei HTML, dar înainte de evenimentul DOMContentLoaded.
• Ordinea de execuție a scripturilor cu defer este garantată, corespunde ordinii în care apar în HTML.
• Comportament similar cu <script> plasat înainte de închiderea tag-ului </body>.

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

• Este tratat ca <script defer> implicit (execuție întârziată după analiză, păstrează ordinea).
• Poate fi utilizat cu atributul async.
• Suportă importul/exportul de module. Creează un spațiu de nume (scope) separat.

Atribut	Încărcarea scriptului	Executarea scriptului	Blocarea analizei HTML	Ordinea de execuție
Fără	Blocantă	Blocantă	Da	Se păstrează
async	Non-blocantă (paralelă)	Non-blocantă (la finalizarea încărcării)	Nu	Nu este garantat
defer	Non-blocantă (paralelă)	Non-blocantă (după analiza HTML)	Nu	Se păstrează
type="module"	Non-blocantă (paralelă)	Non-blocantă (după analiza HTML, implicit)	Nu	Se păstrează (implicit)

// Exemplu de script simplu
console.log('Script normal');

// Exemplu de script asincron
console.log('Script asincron');

// Exemplu de script întârziat
console.log('Script întârziat');

// Exemplu de modul
import { someFunction } from './module.js';
someFunction();
console.log('Script modul');