JavaScript “async” ve “defer” Kullanımı
JavaScript async ve defer, HTML sayfasının yüklenmesi sırasında JavaScript dosyalarının nasıl yükleneceğini ve çalıştırılacağını belirtir.
Bu iki özellik arasındaki fark, JavaScript dosyasının yüklenme zamanı ve çalıştırılma zamanı arasındadır. async
özelliği, sayfa yüklenirken dosyayı yükleyip çalıştırırken defer
özelliği ise dosyayı sayfa yüklenirken yükler ancak çalıştırılmasını erteleyerek sayfa düzenini korur.
“Script” etiketlerinde async
ve defer
özelliklerinin hangisinin kullanılması gerektiği, JavaScript dosyasının sayfada nasıl etkileşimde bulunacağına bağlıdır. Örneğin, sayfa yüklenirken JavaScript dosyasının hemen çalıştırılmasını istiyorsak async
özelliğini kullanırız. Tam tersi, yani sayfa yüklenirken JavaScript dosyasının çalıştırılmasını ertelemek istiyorsak defer
özelliğini kullanırız.
JavaScript’te async
ve defer
özellikleri, <script>
</script>
etiketleri arasına eklenir ve sadece harici (external) JavaScript dosyaları için kullanılır (yani, sayfa içinde JavaScript kodu için değil). Yani iki türlü HTML dökümanlarımıza ekleyebiliriz:
<script src="/path/to/script.js" async></script>
<script src="/path/to/script.js" defer></script>
Bu iki özelliğin çalışma mantığı farklı olduğu için haliyle aynı anda kullanılamaz. Eğer iki özellik aynı anda kullanılmaya çalışılırsa, defer
özelliği öncelikli olacaktır. Dolayısıyla
Malumunuz web tarayıcıları, bir HTML dosyası gördüğünde o dökümanı satır satır okuyan ve HTML dosyasının ne içerdiğini anlayan “parse” adı verilen bir şey yapmaya başlar.
HTML “Parse” İşlemi
“Parse” kelimesi, Latince “pars” (parça) kökünden gelir ve genellikle bir metni ya da bilgiyi belli birimlere ayırmak, analiz etmek ve anlamını çözmek anlamında kullanılır. Bilgisayar bilimleri bağlamında “parse” terimi, genellikle bir kodu analiz edip belirli bir yapıya (genellikle bir ağaca veya veri yapısına) dönüştürme işlemi için kullanılır.
Dolayısıyla bir HTML dokümanının taranması, anlaşılır bir şekilde sınıflandırılması ve yorumlanması için “parse” işlemi yapılır.
HTML’de parse işlemi, bir HTML dokümanının yüklenirken uygulandığı bir süreçtir. Bu süreç, sayfanın nasıl oluşturulacağını ve görüntüleneceğini belirler. Aynı zamanda, sayfa içeriğinin nasıl gösterileceğini tanımlayan CSS ve JavaScript dosyalarının yüklenmesine de katkıda bulunur.
Tarayıcılar tarafından otomatik olarak gerçekleştirilen “parse” işlemi ile HTML dokümanı satır satır okunmaya başlanır. Ne zaman ki tarayıcı bir JavaScript etiketi ile karşılaşır, işte o esnada “parse” işlemini durdurur ve ilgili “script” dosyasını indirerek onu çalıştırır. Sonrasında da “parse” işlemini kaldığı yerden devam ettirir.

HTML dokümanlarında “script” etiketleri genellikle body kapanış etiketinden () hemen önce konumlandırılır. Eğer HTML dokümanında birden fazla JavaScript dosyası varsa, bu dosyaların sıralaması “execution order” olarak adlandırılan bir düzene göre yapılmalıdır. Aksi halde, satır satır okuma işlemi yapan web tarayıcısı hata mesajı verebilir.
JavaScript “async” Kullanımı
HTML dökümanına yazılmış async
özelliği, tarayıcının belirtilen JavaScript dosyasını asenkron bir şekilde yüklemesini sağlar. Bu asenkron yükleme, dosyanın indirilmesi sırasında tarayıcının “parse” işlemine kesintisiz devam etmesine imkan verse de JavaScript dosyası çalıştırılmaya başlandığında, parse işlemini geçici olarak durdurur.
Yani async
özelliği ile yüklenen bir JavaScript dosyası söz konusu olduğunda, dosyanın indirilmesi sırasında HTML dokümanının “parse” edilmesi devam eder. Ancak, JavaScript dosyası tamamen indirildiğinde, parse işlemi geçici olarak durur ve öncelik olarak indirilen JavaScript dosyası çalıştırılır. JavaScript’in çalıştırılmasının tamamlanmasının ardından “parse” işlemi tekrar devam eder.

Her ne kadar bu durum sayfa yüklenmesini hızlandırsa da ilgili JavaScript dosyasının yüklenme ve çalıştırılması parse işlemi devam ederken gerçekleştiği için sayfa düzeninde bozulmalar olabilir.
<!-- Async Örneği -->
<script async src="example.js"></script>
Bir web sayfasında, async
özelliğiyle iki adet JavaScript dosyası yüklendiğini düşünelim. async
özelliği sayesinde her iki dosya da sayfa yüklenirken paralel olarak yüklenmeye başlar ve tamamlandığında hemen çalıştırılır. Ancak, bu dosyaların hangisinin önce tamamlanıp çalıştırılacağı kesin olarak bilinmez. Haliyle bu ikisi arasında birbirine bağlı işlemler söz konusu değilse sıkıntı olmayacaktır. Fakat bu dosyaların belirli bir sıra ile çalıştırılması gerekiyorsa, bu asenkron yüklemeler sayfa düzenini bozabilir.
Bundan dolayı eğer JavaScript dosyalarının çalışması için belirli bir sıralamaya ihtiyaç duyuluyorsa, bu sırayı sağlamak adına async
özelliğinin kullanılması tavsiye edilmez.
JavaScript “defer” Kullanımı
defer
özelliği eklenmiş bir script etiketinde, tarayıcı JavaScript dosyasını indirirken HTML’in parse edilmesi de kesintisiz devam eder. Ancak, bu özellik sayesinde, JavaScript dosyasının çalıştırılması için HTML’in tamamen parse edilmesi beklenir. Böylece, defer
ile yüklenen scriptler belirlediğimiz sıra ile aktif olur, bu da sayfanın istenen yapıda kalmasına yardımcı olur.

Eğer HTML dökümanındaki JavaScript dosyası önemsizse, yani sonra çalışsa da olur diyorsanız sayfa performansını arttırmak adına defer
özelliği kullanılmalıdır. Buna karşılık birbirine bağımlı JavaScript dosyaları varsa ve bunların belirli bir sıra ile çalışmasını istiyorsanız, defer
özelliği kullanarak dosyaların yüklenme sırasına göre çalışmasını garantileyebilirsiniz. Bu sayede, bir dosyanın diğerine bağımlılığını koruyarak olası hataların veya istenmeyen davranışların önüne geçmiş olursunuz.
<!-- Defer Örneği -->
<script defer src="example.js"></script>
Özet olarak, async
ve defer
özellikleri sayfa yüklenirken JavaScript dosyalarının nasıl yükleneceğini belirtmek için kullanılır. Yukarıda da belirttiğimiz gibi async
özelliği sayfa yüklenirken dosyayı yükler ve hemen çalıştırır. Buna karşılık defer
özelliği dosyayı sayfa yüklenirken yükler ancak çalıştırılmasını erteleyerek sayfa düzenini korur.
Eğer, defer
özelliğini kullanmayı planlıyorsanız bu scripti <head>
bölümüne yerleştirmeniz daha uygundur. Ancak, Google Analytics gibi hızlı bir şekilde çalışmasını istediğiniz JavaScript kodları için async
özelliğini tercih etmelisiniz.
Sonuç olarak, Javascript kodlarınızda kullanabileceğiniz async ve defer anahtar kelimeleri ile web sayfalarının daha etkili ve optimize bir şekilde yüklenmesine yardımcı olup kullanıcı deneyimini arttırabilirsiniz.
Ancak, Google Analytics gibi hızlı bir şekilde çalışmasını istediğiniz JavaScript kodları için async özelliğini tercih etmelisiniz.
bu cümle ile bir hata yapmaktan kurtarılmış oldum. çoğu dökümanda bu önemli ayrıntı bulunmuyor