Muhammed Medeni Baykal

jQuery Seçicilerinde Performans Testleri

jQuery’yi hepiniz duymuşsunuzdur, zaten duymayanı dövüyorlar burada ;) jQuery seçicileri, javascript üzerinden bize çok karmaşık olabilecek seçme işlemlerini rahatça yapma imkanı veriyor. Şimdi, çesitli durumlarda bu seçicilerin performanslarını test edeceğim… Karşılaştırmalar Internet Explorer 8 üzerinde yapılmıştır.

HTML Nesnesi Yaratmak

var div = jQuery("<div />").attr("id", "test123")
                           .addClass("divIste"); 

jQuery’de bir HTML nesnesi yaratmak istediğimiz zaman, yukarıdakine benzer bir kod kullanırız.  Ancak bu kullanım, aşağıdaki ile karşılaştırıldığında %20 daha yavaş.

var div = jQuery(document.createElement("DIV"))
                      .attr("id", "test123")
                      .addClass("divIste");

HTML Nesnesi Seçmek

ID ile Şeçmek

jQuery seçicilerini kullanrak bir HTML nesnesi seçmek için genelde aşağıdaki gibi bir kod bloğu kullanırız:

var div = jQuery("#ssTest").toggleClass("divIste");

Ancak, bu yöntem aşağıdaki ile karşılaştırıldığında %22 daha yavaş.

var div = jQuery(document.getElementById("ssTest"))
                         .toggleClass("divIste");

Tür ile Seçmek

jQuery’de belli bir türde olan nesneleri seçmek için kulladığımız,

var div = jQuery("input").toggleClass("divIste");

kod bloğu,

var div = jQuery(document.getElementsByTagName("input"))
                         .toggleClass("divIste");

kod bloğundan yaklaşık %3 daha yavaş…

Sonuç

jQuery üzerinden, ID ile nesne seçimi yaparken ve yeni bir nesne oluştururken ikinci örneklerdeki gibi yaparsak, belli bir oranda performans kazancı sağlayabiliriz. Son olarak aşağıdaki tabloda, IE ve Chrome’nin belirtilen işlemleri 100000 defa yapmak için ihtiyaç duydukları ortalama zamanı bulacaksınız… (Her işlemi 15 defa yaptım ve ortalamasını aldım)