Javascript Lazy Loading

Web uygulamalarında istemci (client) tarafında yapılacak bazı küçük işlemlerle yoğun trafik alan sistemlerde sayfanın daha hızlı yüklenmesini (browser tarafında daha erken render edilmesini) sağlayabilir ve arkaplandan geri kalan dosyalarınızı yüklemeye devam edebilirsiniz. Böylece ziyaretçilerinizi mevcut sayfa ile daha erken ilgilenmeye başlar ve canları sıkılmamış olur. Örnek senaryoda yoğun trafik alan finans servisiniz için her 30 saniyede bir verileri güncelleyen javascript kod bloğunu sayfa yüklendikten sonra yükleyip çalışmasını sağlayabiliriz. Bunun için window.onload event'ine yüklemeyi başalatacak olan fonksiyonunuzu register edip sayfa yüklendikten sonra yüklenmeye başlamasını sağlayabiliriz. Sayfa yüklendikten sonra yapılan bu sonraki yüklemelere "Lazy Loading" adını vermekteyiz. Örneği basit bir kod ile açıklayalım;

window.onload = function() {
 var head = document.getElementsByTagName("head")[0];
 var script = document.createElement("script");
 script.language = "javascript";
 script.type = "text/javascript";
 script.src = "refreshRates.js";
 head.appendChild(script);
}

"refreshRates.js" dosyanızın içeriği browser sayfanızı render ettikten sonra DOM'a yeni bir child element olarak eklenip arkaplandan yüklenerek milisaniyeler (bu süre dosyalarınızın boyutuna göre değişir) oranında olsa da sayfanın daha hızlı yüklenmesine katkı sağlayacaktır.