async ve defer Öznitelikleri
HTML ayrıştırmasını engellemeden betikleri yükleyin
async ve defer Öznitelikleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Varsayılan Betik Davranışı
async veya defer olmadan kullanılan düz bir <script src="...">, indirilip çalıştırılırken HTML ayrıştırmasını engeller. Betiğin altındaki her şeyin oluşturulması duraklatılır; bu nedenle betikler geleneksel olarak <body> etiketinin sonunda yer alırdı.
async Paralel İndirme Yapar
<script async src="...">, betiği HTML ayrıştırmasıyla paralel olarak indirir ve gelir gelmez çalıştırır. Çalıştırma sırasında HTML ayrıştırması yine duraklatılır, ancak yalnızca kısa bir süre için — betik diğer kaynakların indirilmesini engellemez.
async Çalıştırma Sırasını Öngörülemez Kılar
İki async betik, indirmesi önce tamamlanan sırada çalışır. Birbirine bağlı betikler için async'i hiçbir zaman kullanmayınız (jQuery'den önce jQuery eklentisi gibi); çünkü ön koşul kullanılabilir olmadan bağımlı betik çalışabilir.
defer HTML'yi Bekler
<script defer src="...">, async gibi paralel olarak indirilir; ancak çalıştırılması HTML tamamen ayrıştırılana kadar, yani DOMContentLoaded olayından hemen öncesine kadar ertelenir. Betik ayrıştırmayı hiçbir zaman engellemez.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer Sırayı Korur
Birden çok defer betiği, body'nin sonunda bulunan normal betikler gibi bildirim sırasına göre çalışır. Bu nedenle defer, birbirine bağlı betikler için doğru seçimdir: yardımcılar, manuel düzenleme gerektirmeden onları kullanan kodlardan önce yüklenir.
async ve defer Arasında Seçim
DOM'a dokunmayan ve bağımlılığı olmayan bağımsız üçüncü taraf parçacıkları (analiz, reklamlar) için async kullanınız. DOM'a ihtiyaç duyan ve diğer betiklere bağlı olan kendi uygulama kodunuz için defer kullanınız.
Modüller Varsayılan Olarak Ertelenir
<script type="module"> otomatik olarak defer gibi davranır — paralel olarak indirilir, ayrıştırmadan sonra çalışır ve sırayı korur. Bir modüle defer eklemek mümkündür ancak gereksizdir; async eklemek ise davranışı yeniden async durumuna getirir.
Satır İçi Betikler async/defer'i Yoksayar
async ve defer yalnızca harici betikler için (src ile) geçerlidir. Satır içi bir <script> etiketi, özniteliklerden bağımsız olarak hemen çalışır; bu nedenle <script>console.log(1)</script> için bu öznitelikler sessizce yok sayılır.
Yerleştirme Daha Az Kritik Hale Geliyor
defer (veya modüller) ile <script> etiketleri, ayrıştırmayı engellemeden <head> içinde bulunabilir — ayrıca bu etiketleri oraya koymak, tarayıcının onları keşfedip indirmeye <body> etiketinin sonuna göre daha erken başlamasını sağlar.
<head>
<script defer src="app.js"></script>
</head>preload ile Birleştirme
Gecikmeye duyarlı betikler için head içinde <link rel="preload" as="script" href="..."> kullanarak aşağıda ertelenmiş bir <script> etiketiyle birlikte belirtiniz. preload indirmeyi hemen başlatırken defer, çalıştırma sırasının doğru kalmasını sağlar.
Yaygın Tuzak
Sıfır bağımlılığı olduğunu doğrulamadan bir betiği async olarak işaretlemek, "benim makinemde çalışıyor, üretimde bozuluyor" türündeki yarış koşullarının en yaygın nedenidir. Emin olmadığınızda defer'i tercih ediniz — async'in sert davrandığı durumlarda defer daha affedicidir.
Bilginizi Sınayın
İkinci betiğin birinciye bağlı olduğu iki betik için async ile defer arasındaki fark nedir?
Özet
async ve defer, betikleri HTML ayrıştırmasıyla paralel olarak indirir. async, geldiği anda öngörülemez bir sırada çalışır — bağımsız üçüncü taraf parçacıkları için kullanınız. defer, ayrıştırmadan sonra bildirim sırasına göre çalışır — bağımlılıkları olan uygulama kodu için kullanınız. Modüller varsayılan olarak defer davranışını kullanır.
Sıkça Sorulan Sorular
“async ve defer Öznitelikleri” dersi ücretsiz mi?
Evet — “async ve defer Öznitelikleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“async ve defer Öznitelikleri” dersinde ne öğreneceğim?
HTML ayrıştırmasını engellemeden betikleri yükleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“async ve defer Öznitelikleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- async ve defer Öznitelikleri
- Preload, Prefetch ve Preconnect
- Görsellerde Tembel Yükleme: loading=lazy
- Kaynak İpuçları: modulepreload