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:

1. <script src="/path/to/script.js" async></script>
2. <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.

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.

Ö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.