HTML5 script etiketinin 5 özelliği vardır. Bu özellikler async, charset, defer, src ve type özellikleridir. Bu makalemizde ayrıntılarıyla script async özelliğini inceleyeceğiz. Diğer konuları da merak ediyorsanız özellik isimlerine tıklayarak ilgili sayfalarda konuları inceleyebilirsiniz.
Öncelikle konuya giriş yapmak açısından söylemem gerekiyor ki async özelliği script etiketinde sadece harici kaynaklar için kullanılan bir özelliktir. Örneğin projeniz belirli bir noktasında jquery kütüphanesini dışarıdan bir adresten yükleyecekseniz o zaman async özelliğini kullanabilirsiniz. Yani async özelliğinin kullanıldığı script etiketinin kaynağı harici kaynak olmalıdır.
Peki bir harici kaynağın async olarak belirtilmesi ne anlama geliyor ve HTML script async özelliği nedir?
Bu konuya giriş yapmadan önce, konunun anlaşılması için öncelikle JavaScript dosyalarının nasıl çalıştırıldığından bahsetmem gerekiyor:
Tarayıcıların web sayfalarını yükleme mantığına sayfanın başlangıcından itibaren satırları çalıştırır. Bu sırada harici kaynaklar dosya büyüklüğüne ve harici kaynağın veri iletim hızına göre sitenizin yüklenmesini de etkileyebilir. Bu yüzden dışarıdan yüklenen ve sayfadaki kodlarla bağımlılığı olmayan JavaScript dosyalarının yüklenmesi beklemek anlamsızdır. Bu sadece sayfa yüklenme hızını olumsuz etkiler. Bu yüzden harici kaynaklar için async özelliği geliştirilmiştir.
Yani bir sayfa derlendiğinde sırasıyla JavaScript dosyaları yüklenirken async özellikli bir kaynak gördüğünde bu kaynağı yüklenmesi için beklemez ve kodu bir sonraki satırdan çalıştırmaya devam eder. Bu kaynak yüklendiği kadar kullanılabilir durumdadır.
Örnek Kullanım:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> // Normal Kullanım
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> // HTML 5 Async Özelliği İle Kullanım
Makale başlığındaki ikinci soru ne zaman kullanıldığıdır?
Aslında bu sorunun cevabını makalenin daha önceki kısımlarında versem de bir daha anlatmak daha doğrudur. script async özelliği sadece harici kaynaklar için (Dışarıdan yüklenen JavaScript kütüphaneleri için) kullanılır. script async özelliği kullanılırken çok dikkatli olunmalıdır. Zira sayfa içinde async özelliği kullanılan JavaScript dosyasına bağımlı başka dosyalar varsa ve harici dosyaların yüklenmesinde gecikmeler yaşanırsa bu da sayfa yüklenmesinde ve çalışmasında hatalara neden olabilir. Bu noktada önemli diğer konu ise bu hatanın kolay kolay tespit edilememesi ve farklı tarayıcılarda, farklı internet hızlarında farklı çalışmasıdır.
Makale başlığındaki üçüncü soru olan ne için kullanılır sorusu içinse genelde dışarıdan yüklenen ve başka kütüphanelere bağımlılığı olmayan JavaScript dosyalarını yüklendiği zaman kullanabilmek için geliştirilmiş ve sayfa hızını optimize etmek için kullanılan bir özelliktir. Özetle script async özelliğinin amacı sayfa yüklenme hızının minimuma indirilmesidir. Bu özelliğin doğru kullanılması web sitenizi ziyaret edecek kullanıcıların istediği sayfalara en hızlı sürede ulaşması için anahtar özelliklerden bir tanesidir.
Son olarak konuyu özetleyecek olursak, HTML5 Script Async özelliği web site yüklenme süresini minimize etmek için, harici kaynakların asenkron yüklenip, yüklendiği kadar çalıştırılmasını sağlayan bir özelliktir.
Yorumlar
Yorum Gönder