Daha hızlı jQuery selector’leri için küçük ipuçları

jQuery, herkes için javascript‘i daha kolay hâle getirtilmiş bir framework oldu… Bu akım sayesinde artık neredeyse javascript değil de, sanki jQuery kullanıyoruz…

Aşağıda jQuery kullananların ilgisini çekebilecek küçük ipuçları bulunmaktadır…

1) Mümkün olduğunca class ile seçim yapmayın

Doğal jQuery’de 2 tip seçim türü vardır: document.getElementByTagName (tagler için) ve document.getElementById (id için). Gördüğünüz gibi class için birşey yok, varsa da ek bir fonksyonla oluşturuluyor ve javascriptin kendi doğasında yok…

Ayrıca işin mantığına bakacak olursak eğer önce regex ile elementlerde class var mı diye bakılır, varsa class’lar boşluk ile ayrılır vs vs. ID veya tagdeki gibi tek hamlede bulunamayacak bir işlem.

2) Selector’lerinizi (seçici) kaydedin ya da bağlayın

$("div#elementID").hide();
$("div#elementID").css("width","200");
$("div#elementID").show();

Yukarıdaki kodlar aslında yanlış değildir fakat aslında çok büyük bir yanlışlık vardır; performans!.. Bu şekildeyken her seferinde elementID’yi tekrar tekrar arar ve işlem yapar. 100 satırlık bir sayfada herhangi bir hız farkı göze çarpmaz ama Facebook‘ta ya da aklınıza gelebilecek efektlerle yüklü bir sitede böyle birşey asrın hatası denebilecek kadar büyüktür… Bunu yerine elementi bir değişkene atamak daha makûldür:

var elementID = $("div#elementID");
elementID.hide();
elementID.css("width","200");
elementID.show();

ya da böyle bir örneği bağlayabilirsiniz de :

$("div#elementID").hide().css("width","200").show();

3) İçeriksel bilgi

Eğer selectorünüz daha fazla bilgi verebiliyorsanız verin. Örneğin :

$(".sinif").hide();

yukarıdaki şekilde çalışır fakat:

$("div.sinif").hide();

şekilde daha hızlı çalışır.

Son olarak…

Özetle: elinizden geldiğince nesne tek ise ID, değilse – ve eğer mümkünse – element tagiyle birlikte class’ıyla seçmeye çalışın. Eğer o nesneyi birden çok kez kullanacaksanız eğer değişkene atayın.

Kolay gelsin ;)