Merhaba. Bu yazımızda başka bir Javascript koonusunu ele alacağız. async ve defer, harici JavaScript dosyalarını HTML belgelerine eklerken kullanılan niteliklerdir. Tarayıcının betiği nasıl yüklediğini ve çalıştırdığını etkilerler.
Hepimiz HTML’mize harici JavaScript dosyalarını yüklemek için script etiketini kullanmaya alışkınız. Geleneksel olarak, HTML yüklendikten sonra komut dosyalarının yüklenmesini sağlamanın tek geçici çözümü, komut dosyası etiketlerini gövdenin sonuna doğru taşımaktı. Ancak JavaScript o zamandan bu yana çok yol kat etti. ES2015’teki spesifikasyona, JavaScript’in nasıl yükleneceği konusunda daha ayrıntılı kontrole izin veren erteleme ve zaman uyumsuzluk gibi özellikler eklenmiştir.
Erteleme ve eşzamansız niteliklerin ne olduğuna ve bunların JavaScript yüklemesini optimize etmeye nasıl yardımcı olduklarına bir göz atalım.
Bu Etiketlere Neden İhtiyacımız Var?
Bir HTML sayfasının başlığına bir script dosyası etiketi yerleştirilirse, HTML’nin ayrıştırılması, script dosyası getirilip yürütülene kadar duraklatılır. HTML ayrıştırma yalnızca script dosyası yürütme işlemi tamamlandıktan sonra devam eder. Bu, kötü kullanıcı deneyimlerine yol açabilir. Hem erteleme hem de zaman uyumsuzluk bunun önlenmesine yardımcı olur. HTML ayrıştırılırken script dosyası etiketinin paralel olarak indirilmesine izin verirler.
Varsayılan Davranış
HTML sayfamızı genellikle <script> etiketiyle harici javascript’e bağlarız. Geleneksel olarak, JavaScript <script> etiketleri genellikle HTML belgesinin <head> bölümüne yerleştirilirdi. Ancak bunu yapmak, JavaScript dosyası getirilip yürütülene kadar HTML’nin ayrıştırılmasının engellenmesi anlamına gelir ve bu da sayfa yükleme sürelerinin yavaşlamasına yol açar. Günümüzde çoğunlukla <body> öğesinin tüm içeriği sayfaya ilk yüklendikten sonra <script> etiketini tutmayı tercih ediyoruz.
<script src="example.js"></script>
HTML ayrıştırma ve script dosyası çalıştırmanın nasıl gerçekleştiği aşağıda açıklanmıştır
defer ve async
Bunların her ikisi de benzer sözdizimine sahip bool nitelikleridir:
Etiketlerin yalnızca script dosyası HTML’nin başlık bölümünde yer aldığında yararlı olduğunu belirtmekte fayda var. Komut dosyası gövde etiketinin içine konulursa işe yaramazlar.
Her ikisi de belirtilirse öncelik zaman uyumsuzluğa verilir.
async
Async özelliğine sahip bir script dosyası eklediğimizde, tarayıcıya HTML belgesini ayrıştırırken komut dosyasını eşzamansız olarak indirmesini söyler. script dosyası, HTML ayrıştırma işlemini engellemeden arka planda indirilir.
Betik indirildikten sonra eşzamansız olarak yürütülür; bu, HTML belgesinin ayrıştırılması tamamlanmadan önce bile herhangi bir zamanda çalıştırılabileceği anlamına gelir. Birden fazla script dosyası eşzamansız olarak yüklenirse, belgedeki sıralarına bakılmaksızın indirme işlemi biter bitmez yürütülürler.
script dosyasının DOM’un tam olarak yüklenmesine veya diğer komut dosyalarına bağlı olmadığı durumlarda kullanışlıdır.
<script src="example.js" async></script>
defer
defer özelliğine sahip bir script eklediğimizde, bu aynı zamanda tarayıcıya HTML belgesini ayrıştırırken betiği eşzamansız olarak indirmesini de söyler.
Ancak komut dosyasının yürütülmesi, HTML belgesi ayrıştırılana kadar ertelenir.
defer özelliğine sahip komut dosyaları, belgede göründükleri sırayla yürütülür. Komut dosyası DOM’un tamamen ayrıştırılmasına bağlı olduğunda veya komut dosyası yürütme sırası önemli olduğunda kullanışlıdır.
<script src="example.js" defer></script>
Hangisini Kullanmalıyım?
Farklı süreçleri görselleştirmeye yardımcı olacak bir grafik:
Çoğu zaman defer tercih edilen seçenektir çünkü sayfa yükleme süresini en fazla azaltır. DOM hazır olana kadar yürütülmez ve script dosyası sırasını takip eder. Böylece betiğin yürütülmesi üzerinde de daha fazla kontrole sahip olursunuz.
Async kulağa daha çekici geliyor ama yalnızca betiğin DOM’a veya başka bir betiklere ihtiyacı yoksa kullanışlıdır.
script dosyası etiketindeki erteleme ve eşzamansız öznitelikler ve bunları kullanarak sayfa yükleme süresini nasıl optimize edebileceğiniz hakkında bilmeniz gereken tek şey budur.
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
