<script> etiketinin modlarının (async, defer və ya type) işləməsində fərq nədir?

<script> atributu olmadan

• HTML <script> etiketi ilə analiz edilir.
• <script> etiketi aşkarlandıqda HTML analizi dayandırılır.
• Skript yüklənir.
• Skript icra olunur.
• Skript icra edildikdən sonra HTML analizi davam edir.

<script async>

• HTML, skriptin yüklənməsi ilə eyni vaxtda analiz edilir.
• Skriptin yüklənməsi tamamlandıqda HTML analizi dayandırılır.
• Skript icra olunur.
• Skript icra edildikdən sonra HTML analizi davam edir.
• async ilə skriptlərin icra sırası təmin edilmir, yükləmə sürətindən asılıdır.

<script defer>

• HTML, skriptin yüklənməsi ilə eyni vaxtda analiz edilir.
• Skript HTML analizi tamamlandıqdan sonra, lakin DOMContentLoaded hadisəsindən əvvəl icra olunur.
• defer ilə skriptlərin icra sırası təmin edilir, HTML-dəki sırasına uyğun olur.
• Davranış </body> bağlanış teqi əvvəl yerləşdirilmiş <script>-ə bənzəyir.

<script type="module"> (ECMAScript modulları üçün)

• Standart olaraq <script defer> kimi işlənir (gecikdirilmiş icra, sıralama qorunur).
• async atributu ilə istifadə edilə bilər.
• Modulları import/export etməyə dəstək verir. Ayrı scope (sahə) yaradır.

Atribut	Skriptin yüklənməsi	Skriptin icrası	HTML analizi bloklanması	İcra sırası
Yox	Bloklayıcı	Bloklayıcı	Bəli	Saxlanılır
async	Bloklamayan (paralel)	Bloklamayan (yükləmə tamamlandıqda)	Xeyr	Garanli deyil
defer	Bloklamayan (paralel)	Bloklamayan (HTML analizindən sonra)	Xeyr	Saxlanılır
type="module"	Bloklamayan (paralel)	Bloklamayan (HTML analizindən sonra, standart)	Xeyr	Saxlanılır (standart)

// Sadə skript nümunəsi
console.log('Normal skript');

// Asinxron skript nümunəsi
console.log('Asinxron skript');

// Gecikdirilmiş skript nümunəsi
console.log('Gecikdirilmiş skript');

// Modul nümunəsi
import { someFunction } from './module.js';
someFunction();
console.log('Modul skripti');