<script> etiketi modları (async, defer veya type) arasındaki fark nedir?

<script> attribute olmadan

• HTML, <script> etiketi bulunana kadar analiz edilir.
• <script> etiketi tespit edildiğinde HTML analizi duraklatılır.
• Betik yüklenir.
• Betik çalıştırılır.
• Betik çalıştırıldıktan sonra HTML analizi devam eder.

<script async>

• HTML, betik yüklenirken aynı anda analiz edilir.
• Betik yüklemesi tamamlandığında HTML analizi duraklatılır.
• Betik çalıştırılır.
• Betik çalıştırıldıktan sonra HTML analizi devam eder.
• async ile betiklerin çalışma sırası garanti edilmez, yüklenme hızına bağlıdır.

<script defer>

• HTML, betik yüklenirken aynı anda analiz edilir.
• Betik, HTML analizi tamamlandıktan sonra, DOMContentLoaded olayı öncesinde çalışır.
• defer ile betiklerin çalışma sırası garanti edilir, HTML içindeki sırasına uygun olur.
• <script> etiketi, kapanış </body> etiketi öncesine yerleştirildiğinde davranış benzerdir.

<script type="module"> (ECMAScript Modülleri için)

• Varsayılan olarak <script defer> gibi davranır (gecikmeli çalışma, sıralama korunur).
• async attribute ile kullanılabilir.
• Modüllerin içe aktarım/dışa aktarımını destekler. Ayrı bir kapsam (scope) oluşturur.

Attribute	Betik yükleme	Betik çalıştırma	HTML analizi engelleme	Çalıştırma sırası
Yok	Bloklayıcı	Bloklayıcı	Evet	Korunur
async	Engelleyici olmayan (paralel)	Engelleyici olmayan (yükleme tamamlandıktan sonra)	Hayır	Garantilenmez
defer	Engelleyici olmayan (paralel)	Engelleyici olmayan (HTML analizinden sonra)	Hayır	Korunur
type="module"	Engelleyici olmayan (paralel)	Engelleyici olmayan (HTML analizinden sonra, varsayılan)	Hayır	Korunur (varsayılan)

// Basit bir betik örneği
console.log('Normal betik');

// Asenkron betik örneği
console.log('Asenkron betik');

// Ertelenmiş betik örneği
console.log('Ertelenmiş betik');

// Modül örneği
import { someFunction } from './module.js';
someFunction();
console.log('Modül betiği');