HTML5 ile birlikte gelen yeni bir özellikten bahsedeceğim: async. Kullanımı yerine göre oldukça faydalı olan async özelliği ile script'lerin sayfada ne zaman yükleneceği belirlenebilir. Yani script'in asenkron olarak çalışıp çalışmayacağını tanımlar. Sayfaların açılışını hızlandırmak amaçlı kullanılabilir. Sadece dışarıdan yüklenen scriptler için uygulanabilir (src ile).
Kullanımı
<script src="deneme.js" async></script>
async Nedir?
async özelliği tanımlanmış ve tanımlanmamış scriptleri daha kolay anlaşılması için aşağıdaki resimler üzerinden anlatacağım.
async Tanımsız script
HTML belgesine ilk satırdan başlayarak parsing işlemi (kodların okunup çözümlenmesi) uygulanır. Parsing işlemi script dosyası ile karşılaşana kadar devam eder. script dosyası ile karşılaştığında ise script indilir ve çalıştırılır. Akabinde sayfanın geri kalan kısımları için parsing işlemi uygulanır ve en sonunda sayfa tamamen yüklenmiş olur.
async Tanımlı script
HTML belgesine ilk satırdan başlayarak parsing işlemi uygulanır. Parsing işlemi sadece script çalıştırılırken durdurulur. script çalıştırıldıktan sonra tekrar parsing işlemi devam eder ve en sonunda sayfa tamamen yüklenmiş olur.
async Avantajları
async sayfaların daha hızlı yüklenmesini sağlar. Yukarıdaki resimlerde görüldüğü üzere async tanımlıysa script indirilirken bile parsing işlemi devam eder. Yani asenkron olarak işlemler devam eder. Bu sayede zamandan tasarruf edilir. Eğer async tanımlı değilse bir de script dosyası büyük boyutluysa sayfanın açılmasını engelleyecektir. Çünkü sayfa yüklenmeden önce script dosyasının inmesi beklenecektir.