Az kodla çok iş yapmanızı sağlayan jQuery’nin elementleri seçme hızını gözleyeceğiz. jQuery, yine bu kütüphanenin üreticisi olan John Resig tarafından geliştirilen Sizzle seçici motorunu kullanıyor. Bu da 1.3.x sürümlerinden itibaren ana çekirdeğe katılarak çok ciddi performans artışı (25 kat) sağlandı. Stack Overflow’da da bu konu tartışılmış ortalama aşağıda yazılanlarla aynı görüş üzerinde buluşulmuştu.
Kendim de benzer bir seçici performansı ölçen bir ufak kod yazdım. Biliyorsunuz istatistik oluşmak için çok dikkatlı olmak gerek. Fakat ben burda çok fazla bir detaylı bir çerçeve oluşturamayacağım için, sadece görmek için yeterli bir çalışma yaptım.

adresinden inceleyebilirisiniz.
jQuery’nin seçici performansını açığa kavurşturalım adlı yazıda yer alan bilgilere göre seçicilerde seçicilerin (selectors) belirliği arttıkça seçme performansı çok daha hızlandığı görülmüş.Fakat şöyle bir durum daha var, eğeer seçme şartınız artarsa bu sefer performans düşmekte.

Hatta bu konuda John da bir yazı yayınlamış seçicilerin class adı seçme temelleri hakkında bilgilendirmişti.

$(’.element’) seçicisi $(’div.element’)‘e göre çok daha hızlı olduğu ölçülmüş.

$(’.sample-elements:first’), $(’.sample-elements .last:last’), $(’.sample-elements div.last:last’), $(’.sample-elements div:first’), $(’.sample-elements div:eq(2)’) Gördüğünüz gibi seçicideki detayın fazlalaşması da yine seçicide performans düşmesine sebep oluyor.

Asıl performanslı seçmeyi hiç şüphesiz ki id isimle seçtiğimizde alıyoruz.

console.time('test');  
for (i = 0; i < 500; i++) {  
    $('.'+i);  
}  
console.timeEnd('test'); 
// $('.class');
// ~8204ms 
 
console.time('test');  
for (i = 0; i < 500; i++) {  
    $('#'+i);  
}  
console.timeEnd('test'); 
// $('#id');
// ~32ms

Bu seçiciler hakkında çok daha fazla seçicinin performans testini bu linkten yapabilirsiniz. Faydalanabileceğiniz diğer yazılar ise:

• jQuery: Performance analysis of selectors
• jQuery Seçicilerinde Performans Testleri