eburhan.com

Web sayfalarında javascript ağırlığı gün geçtikçe artıyor. Dolayısıyla <script> etiketi kullanarak artık daha fazla javascript dosyası yükletiyoruz. Fakat bir zaman sonra bunları yönetmek, aralarındaki bağımlılıklara dikkat etmek zorlaşabiliyor. İşte bu noktada Javascript Yükleyicileri (js loaders) bir çözüm olarak karşımıza çıkıyorlar.

Javascript Yükleyicisi kullanmanın avantajları

<script> etiketinin aslında bazı sorunları var. Öncelikle bu etiketi kullanarak çağırdığınız bir javascript dosyası yükleniyorken, sayfanın diğer yüklenen elemanları bloklanıyor. Örneğin alttaki ekran görüntüsünde görülebileceği üzere sayfadaki 1 tane resim dosyası, 6 tane javascript dosyasının yüklenmesini bekliyor. Non-blocking özellikli javascript yükleyicileri bu durumun oluşmasını önlemiş oluyorlar.

Javascript yükleyicisi kullanmanın diğer bir avantajı ise bağımlılık yönetimi. Bir javascript dosyasındaki (B.js) kodları çalıştırmanız için, ondan önce yüklenmesini beklediğiniz başka bir javascript dosyası (A.js) var diyelim. Dolayısıyla B.js dosyasını kullanabilmeniz için A.js dosyasının tamamen yüklenmiş olmasını beklersiniz. Fakat bu her zaman öyle olmayabilir. Bir nedenden dolayı A.js dosyası yüklenemeyebilir, böyle olunca da B.js dosyasındaki bağımlı kodlar hata üretebilir.

Bunlara ek olarak, javascript yükleyicileri sayesinde bir js dosyasını her sayfada tekrar tekrar çağırmanıza gerek kalmaz. Ne zaman ihtiyacınız varsa o zaman çağırabilirsiniz.

Belli başlı javascript yükleyicileri

İnternette biraz araştırdıktan sonra gerçekten çok fazla javascript yükleyicisi bulabiliyorsunuz. Bunlar arasından en iyisini seçmek için biraz karşılaştırma biraz test yapmak gerekiyor. Benim test yapmaya lâyık gördüğüm javascript yükleyicileri şunlar oldu:

1. Yepnope – yepnopejs.com
2. $script.js – dustindiaz.com/scriptjs
3. LABjs – labjs.com
4. head.js – headjs.com
5. LazyLoad – github.com/rgrove/lazyload
6. JLS – andresvidal.com/jsl
7. Include.js – capmousse.github.com/include.js/
8. loadrunner – github.com/danwrong/loadrunner

	“min” versiyonu	Css Yükleme	Github Takipçi sayısı	Birim Testi Yapılmış mı?	Kararlı mı?
Yepnope	4 KB		734 kişi
$script.js	2 KB		289 kişi
LABjs	6 KB		517 kişi
head.js	4 KB		1916 kişi
LazyLoad	2 KB		178 kişi
JLS	3 KB		-
Include.js	0.6 KB		12 kişi
loadrunner	9 KB		60 kişi
Not: kararlı olup olmaması, test sırasında hata üretip üretmediğini gösterir.

Ben özellikle Yepnope, head.js ve LazyLoad hakkında konuşacağım. Çünkü bunları kullanarak yaptığım testlerde, ne şekilde olursa olsun hata üretmeyenler yalnızca bu 3′ü oldu. Diğerlerinde maalesef arada sırada da olsa hatalar oluşabiliyor. Neden bahsettiğimi aşağıdaki ekran görüntüsünden anlayabilirsiniz.

Yepnope, head.js ve LazyLoad

Kendi yaptığım incelemelerde en çok beğendiğim javascript yükleyicisi Yepnope.js oldu. Özellik bakımından diğerlerinden kesinlikle çok daha üstün. Fallback özelliği sayesinde bir js dosyası yüklenemediğinde alternatif bir kaynaktan aynı js dosyasını yükleyebiliyor. Örneğin jQuery dosyası Google Library‘den yüklenemezse kendi sunucunuz üzerindeki jQuery dosyasını yükleyebiliyorsunuz. Test, Yep ve Nope özellikleri sayesinde “browser bu özelliği destekliyorsa/desteklemiyorsa şu js/css dosyasını yüklet” gibi tanımlamalar yapabiliyorsunuz. Örneğin browser içinde JSON parse etme özelliği yoksa (nope), herhangi bir yerdeki json2.js dosyasının yüklenmesini belirtebiliyorsunuz. Bu çok yararlı bir özellik.

Yepnope bu kadar özellik sunmasına rağmen, js dosyalarını yükleme hızında diğerlerinden geride kalıyor (bunun nedeni aynı js dosyası için 2 request yapması). Özellikle head.js ile karşılaştırsak js dosyaları 5-6 kat daha yavaş yükleniyor. Bunu test etmek için 6 büyük javascript kütüphanesini bu 3 js yükleyici ile ayrı ayrı yüklettim. Ve aynı işlemi 3 kere daha yaptım. Sonuçları alttaki grafikte görüyorsunuz:

head.js‘ye gelirsek, hız bakımından oldukça önde. Yani sizin aradığınız özellikten ziyade hız ise head.js tek alternatif diyebiliriz. Benim gördüğüm tek eksiği CSS dosyaları için bir metodunun olmaması. Bunların isimleri her ne kadar javascript yükleyicisi olsa da aslında CSS dosyalarını da dinamik olarak yükleyebilmeleri lazım. Çünkü birçok js dosyası, yanında bir css dosyası da gerektirebiliyor (jQuery eklentilerini düşünün). Haliyle aynı javascript yükleyici ile hem js hem de css dosyasını yükleyebilmek bize önemli bir avantaj kazandırıyor.

LazyLoad ise hem özellik bakımından hem de hız bakımından diğer ikisinin gerisinde. En büyük handikabı, yüklemiş olduğu bir JS/CSS dosyasını yeniden sayfaya yükleyebilmesi. Yani daha önceden aynı dosya yüklenmiş mi yüklenmemiş mi kontrol etmemesi (Duplicate Source Prevention özelliği yok). Hız konusunda ortalama bir performansı var diyebilirim. Sadece Internet Explorer testlerinde en hızlı yüklemeyi yapabildi. Bunlara ek olarak, diğer ikisinin dosya boyutu 4 KB civarında iken LazyLoad 2 KB dosya boyutuna sahip.

Sonuç

Sonuç olarak, benim için hız ön planda Css yükleme işini başka şekilde hallederim diyorsanız head.js tek alternatif. Ama ben komple bir çözüm istiyorum diyorsanız Yepnope süper bir seçim olacaktır. “Duplicate Source Prevention” için kendim önlem alırım, az ama öz olsun, hem Js için hem Css için minimum çözümleri bana sunsun diyorsanız da LazyLoad tavsiye ederim.

Benim bu bağlamda seçimim head.js oldu. Siz de kendi seçiminizi buraya yorum olarak yazabilirsiniz, konu hakkındaki görüşlerinizi veya eleştirilerinizi beyan edebilirsiniz. Faydalı olması dileğiyle