<script>, <script async> ve <script defer> etiketleri arasındaki fark nedir?

Standart <script> etiketi, HTML'nin ayrıştırmasını durdurur, betiği yükler ve çalıştırır, ardından ayrıştırma devam eder.

<script async> betiği asenkron olarak yükler, HTML ayrıştırması devam ederken. Betik, yükleme sonrası hemen çalıştırılır. Çalıştırma sırası garanti edilmez.

<script defer> betiği asenkron olarak yükler, HTML ayrıştırması devam ederken. Betik, yalnızca HTML ayrıştırması tamamlandıktan sonra, DOMContentLoaded olayı tetiklenmeden önce çalıştırılır. defer ile yüklenen betiklerin çalışma sırası, HTML'deki görünümlerine göre korunur.

Karşılaştırmalı tablo:

Öznitelik	HTML ayrıştırması sırasında betik yükleniyor	Betik çalıştırma	Çalışma sırasını koruma
Yok	Duraklatır	Yükleme sonrası hemen	Evet
async	Devam eder	Yükleme sonrası hemen (ayrıştırmayı kesebilir)	Hayır
defer	Devam eder	HTML ayrıştırması tamamlandıktan sonra	Evet

Örnek:

<!-- Normal betik - ayrıştırmayı engeller -->
<script src="script1.js"></script>

<!-- Asenkron betik - ayrıştırmayı engellemez, yükleme sonrası hemen çalışır -->
<script src="script2.js" async></script>

<!-- Ertelenmiş betik - ayrıştırmayı engellemez, HTML ayrıştırmasından sonra çalışır -->
<script src="script3.js" defer></script>
<script src="script4.js" defer></script> <!-- script3.js'den sonra çalışır -->