- Konu sahibi
- #1
JavaScript’te
En yaygın kullanım şekli şöyledir:
Bu etiketi
Uygulama adımları:
Karar verirken temel fark çalıştırma zamanı ve script’lerin birbirine bağımlı olup olmadığıdır.
Birden fazla harici dosya arasında bağımlılık varsa
Bu örnekte klasik, HTML tarafından eklenen script’lerde
Hayır. Boolean niteliklerde niteliğin bulunması etkin olduğu anlamına gelir; false sözcüğüyle kapatılmaz. Erteleme niteliğini kaldırmak istiyorsanız etiketten defer kısmını tamamen çıkarın. Sonrasında script’in HTML ayrıştırmasını durdurma ve DOM’a erişim zamanını yeniden değerlendirin.
Sonuçları benzer olabilir; ancak
defer, harici bir <script> dosyasının HTML ayrıştırılırken indirilmesini, ancak HTML belgesi tamamen ayrıştırıldıktan sonra çalıştırılmasını sağlayan boolean bir HTML niteliğidir. Böylece JavaScript dosyası HTML ayrıştırmasını gereksiz yere durdurmaz; ayrıca defer kullanılan klasik script’ler, HTML içindeki sıralarını koruyarak çalışır.En yaygın kullanım şekli şöyledir:
Kod:
<script defer src="/js/app.js"></script>Bu etiketi
<head> içinde kullanabilirsiniz. Tarayıcı app.js dosyasını HTML ayrıştırması devam ederken indirebilir; dosyayı çalıştırmayı ise HTML ayrıştırması bittikten sonraya bırakır. Script çalıştıktan sonra DOMContentLoaded olayı tetiklenir. Bu nedenle defer, DOM içindeki buton, form veya diğer elementlere erişmesi gereken harici dosyalar için uygundur.Somut örnek
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Defer örneği</title>
<script defer src="/js/app.js"></script>
</head>
<body>
<button id="selamla">Tıkla</button>
</body>
</html>
Kod:
// /js/app.js
const buton = document.querySelector("#selamla");
buton.addEventListener("click", () => {
console.log("Buton çalıştı");
});
console.log("HTML ayrıştırıldı ve script çalıştı");Uygulama adımları:
- Harici JavaScript dosyanızı oluşturun ve dosyanın gerçekten
/js/app.jsadresinden sunulduğunu kontrol edin. - HTML içine
<script defer src="/js/app.js"></script>ekleyin. Harici dosyanınsrcniteliği olmalıdır; yalnızca satır içi script’edefereklemek beklenen etkiyi oluşturmaz. - Sayfayı açıp tarayıcı geliştirici konsolunda
HTML ayrıştırıldı ve script çalıştımesajını kontrol edin. - Butona tıklayın. Konsolda
Buton çalıştıgörünüyorsa script DOM elementini doğru zamanda bulmuştur.
app.js isteğinin 404 vermediğini ve JavaScript konsolunda sözdizimi hatası bulunmadığını kontrol edin. buton değeri null ise genellikle seçici yanlıştır veya beklenen element HTML içinde hiç yoktur.defer, async ve type="module" farkı
Karar verirken temel fark çalıştırma zamanı ve script’lerin birbirine bağımlı olup olmadığıdır.
| Yöntem | HTML ayrıştırması | Çalıştırma sırası | Uygun kullanım |
|---|---|---|---|
| Normal harici script | İndirme ve çalıştırma sırasında durabilir | Karşılaşıldığı anda | Çalışması mutlaka hemen gereken kod |
| defer | Script indirilirken devam eder | HTML ayrıştırmasından sonra, belge sırasıyla | DOM’a ve başka script’lere bağlı kod |
| async | İndirme sırasında devam eder | İndirme biter bitmez; sıra garanti edilmez | Bağımsız analiz veya reklam script’leri |
| type="module" | Varsayılan olarak ertelenmiş davranır | Modül kurallarına göre | Modern import/export kullanan kod |
defer kullanıp etiketleri bağımlılık sırasına göre yazın:
Kod:
<script defer src="/js/vendor.js"></script>
<script defer src="/js/app.js"></script>Bu örnekte klasik, HTML tarafından eklenen script’lerde
app.js, vendor.js dosyasından sonra çalışır. Aynı etikette async de varsa async davranışı geçerli olur; dinamik eklenen script’lerin zamanlamasını bu örnekle aynı varsaymayın. Dosyalar birbirinden bağımsızsa async daha uygun olabilir; ancak async dosyaların hangi sırada çalışacağını garanti etmez.Sık yapılan hatalar
deferniteliğini satır içi script’te kullanmak:<script defer>...</script>için bu özellik beklenen şekilde çalışmaz; haricisrcdosyası kullanın.asynciledeferdeğerlerini eş anlamlı sanmak:asyncbağımlı dosyaların sırasını bozabilir.- Script’in çalışmasını sayfanın tamamen yüklenmesine bağlamak:
deferiçin resimlerin ve diğer tüm kaynakların bitmesini beklemek gerekmez; esas olarak HTML ayrıştırmasının tamamlanması beklenir. - Klasik script’e
deferekleyiptype="module"ile fark olmadığını düşünmek: modül script’leri zaten varsayılan olarak ertelenmiş çalışır;defermodül script’lerinin davranışını değiştirmez.
Sık sorulan sorular
defer="false" yazarak bu davranışı kapatabilir miyim?
Hayır. Boolean niteliklerde niteliğin bulunması etkin olduğu anlamına gelir; false sözcüğüyle kapatılmaz. Erteleme niteliğini kaldırmak istiyorsanız etiketten defer kısmını tamamen çıkarın. Sonrasında script’in HTML ayrıştırmasını durdurma ve DOM’a erişim zamanını yeniden değerlendirin.
defer ile script’i body sonuna koymak aynı şey midir?
Sonuçları benzer olabilir; ancak
head içindeki defer script’i daha erken keşfedilip indirilebilirken HTML ayrıştırması tamamlanana kadar çalıştırılmaz. Bu nedenle harici ve DOM’a bağlı script’lerde genellikle daha düzenli bir yerleşim sağlar.