jQuery Selector Performansını Arttırmak

jQuery’de daha elementlere daha sağlıklı ve hızlı ulaşabilmek için selector’ünüzü iyi seçmelisiniz. Bazı küçük kriterler var, bu kriterleri bilerek, zamanla yaygın kullanmaya başlayabilir, daha hızlı çalışan jQuery scriptleri yazabilirsiniz.

Herşeyden önce jQuery’nin çalışma mantığını bilmemiz gerekiyor. jQuery’yi anlayabilmek için javascript’e ihtiyacımız var, jQuery bir javascript framework‘ü olduğuna göre, jQuery’de javascript’in fonksyonları üzerine kurulmuş ve bu fonksyonları kullanarak farklı fonksyonlar oluşturulmuştur.

Javascript’te element çağırma işlemleri 2 ( artı 1 ama diğeri konu dışı – boşverin  ) şekilde gerçekleşir. Bunlar aşağıdaki iki fonskyondur;

1. document.getElementById(“aranacak_elementin_idsi“)
2. document.getElementByTagName(“aranacak_elementin_tagi“)

Şimdi bunu bildiğimize göre bu demektir ki aslında class, attribute (öznitelik) arama gibi işlemler varsayılan Javascript fonksyonları değil, birer jQuery fonksyonudur. Şimdi jQuery’nin birkaç element getirme işlemini mantıksal yoldan yapalım;

1) Arama sorgumuz “$(‘#haberler’)”;

1. Sorguyu parse et (parçala ve tanıla)
2. getElementById ile element ara varsa geri döndür

2) Arama sorgumuz “$(‘div.urun’)”;

1. Sorguyu parse et (parçala ve tanıla)
2. Sayfadaki tüm div’leri getElementByTagName ile ara ve bir değişkene ata
3. Değişkendeki tüm elementlerin class attribute’ü var mı bak
4. Varsa class’ları split et ve classlar arasında “urun” var mı kontrol et
5. Bulunan elementleri geri döndür

3) Arama sorgumuz “$(‘.haber’)”;

1. Sorguyu parse et (parçala ve tanıla)
2. Sayfadaki tüm elementleri bul bir değişkene ata
3. Değişkendeki tüm elementlerin class attribute’ü var mı bak
4. Varsa class’ları split et ve classlar arasında “haber” var mı kontrol et
5. Bulunan elementleri geri döndür