defer ve async, dış <script> öğesinin HTML ayrıştırmasına göre ne zaman indirilip yürütüleceğini değiştirir. Her ikisi de betiğin ayrıştırıcıyı engellememek için paralel olarak indirilmesine izin verir — fark, yürütme zamanlamasında yer alır.
Normal: parse──stop──[download+exec]──parse──────── (slowest)
async: parse──────────────────exec──parse──────── (runs whenever it arrives)
defer: parse───────────────────────────parse──exec (after parsing, before DOMContentLoaded)
async | defer | |
|---|---|---|
| İndirme | paralel | paralel |
| Yürütme | indirilir inmez | HTML tamamen ayrıştırıldıktan sonra |
| Sıra korunuyor mu? | Hayır (kim önce bitirse) | Evet (belge sırası) |
| Ayrıştırıcıyı engeller mi? | sadece yürütme sırasında kısaca | hiçbir zaman |
defer — DOM'a dokunan veya birbirlerine/sıraya bağlı betikler için (uygulama kodunuz). DOM var olduktan sonra, sırayla, DOMContentLoaded öncesinde çalışır.async — DOM veya diğer betiklere bağlı olmayan bağımsız üçüncü taraf betikleri için (analitik, reklamlar). Sıra önemli değil, en kısa zamanda çalıştırın.<script src="analytics.js" async></script> <!-- independent → async -->
<script src="app.js" defer></script> <!-- app logic, ordered → defer -->
Not: her ikisi de sadece harici betikler (src) için geçerlidir; satır içi betiklerde göz ardı edilir. ES modülleri (type="module"), varsayılan olarak ertelenir.
defer/async kullanmak, betiklerin HTML ayrıştırmasını engellememesini sağlar; bu da yükleme performansını ve First Contentful Paint'i doğrudan iyileştirir.
Doğru olanı seçmek (defer sıralı, DOM'a bağlı uygulama kodu için, async bağımsız üçüncü taraf betikleri için) hem yavaş yüklemeleri hem de sıraya bağlı hataları önler.