HTML5 async Nedir? async Özelliği ve Kullanımı

HTML5 ile birlikte gelen yeni bir özellikten bahsedeceğimiz bir yazı olacak 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 başlayışını hızlandırmak amaçlı kullanılabilir. Sadece dışarıdan yüklenen scriptler için uygulanabilmekte

</pre></pre>
<ol class="snippet-num">
 	<li><span class="sh_keyword"><script</span> <span class="sh_type">src</span><span class="sh_symbol">=</span><span class="sh_string">"deneme.js"</span> <span class="sh_type">async</span><span class="sh_keyword">></script></span></li>
</ol>
<pre><pre>

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.