jQuery seçicileri vs yerel değişkenlerin performansı

Question

Bir jQuery seçici sonucuna bir işlev kapsamında birden çok kez erişmem gerektiğinde, seçiciyi bir kez çalıştırıp yerel bir değişkene atamam mı önerilir?

Buradaki örnek örneğimi affet, ancak sorunun bu olduğunu düşünüyorum. Yani, bu kod daha hızlı performans gösterir:

var execute = function(){ 
    var element = $('.myElement'); 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

Bu kodun daha: hayır fark varsa

var execute = function(){ 
    $('.myElement').css('color','green'); 
    $('.myElement').attr('title','My Element'); 
    $('.myElement').click(function(){ 
     console.log('clicked'); 
    }); 
} 

, herkes neden açıklayabilir? JQuery, öğeleri seçtikten sonra önbelleğe alır mı? Böylece, sonraki seçmenler dom arama işlemini tekrar yapmak zorunda kalmazlar mı?

Answer 1

eser, zaman ve ilişkili, kesinlikle daha hızlıdır.

http://jsperf.com/caching-jquery-selectors

sonuncu durumda, sizin seçicileri yeniden tanımlanması,% 35 daha yavaş ~ olarak rapor edilir: İşte kanıtı olarak yapılan bir test.

Answer 2

Referansı yerel değişkende saklamak, her seferinde seçim kodunu çalıştırmadan daha hızlı olacaktır. Bu, bir değişkende sakladığınızda uygun öğeleri bulmak için HERHANGİ bir kod yürütmek zorunda kalmamak meselesidir. Temel kuralım, jQuery aramasının sonuçlarını bir kereden fazla kullanacaksam bir değişkende saklamaktır.

Answer 3

Buradaki başka bir seçenek seçici tekrar yerine bir each kullanmak olduğunu ve seçici referansı, ilk davayı yeniden kullanma tekrar

var execute = function(){ 
    $('.myElement').each(function() { 
     var elem = $(this); 
     elem.css('color','green'); 
     elem.attr('title','My Element'); 
     elem.click(function(){ 
     console.log('clicked'); 
     }); 
    }); 
} 

Answer 4

bu bir Unutma: Aslında gerçekten önbelleğe yaklaşım unutuyorsun

var execute = function(){ 
    $('.myElement') 
     .css('color','green') 
     .attr('title','My Element') 
     .click(function(){ 
      console.log('clicked'); 
     }); 
} 

Answer 5

.

jQuery ile olan şey, ilk aramanın $('.selector') pahalı olmasıdır. Fakat bundan sonra, eylemlerinizi ona zincirlemek veya bir değişkene atamak ve değişkeninizdeki eylemlerinizi yürütmek çok da önemli değil. Elde edebileceğiniz ana performans artışı, öğeyi daha da önbelleğe almaktır ve jQuery seçicisine işlev çağrınızın her yinelemesini atamaz.

var element = $('.myElement'); 
var execute = function(){ 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

Bu yaklaşım, önerilen diğer yaklaşımlardan en hızlı sürüme neredeyse iki kat daha hızlıdır.

http://jsperf.com/caching-jquery-selectors/17

Not bakınız: yaşam süresi Günlerden sırasında DOM değişirse unsurların taze seçim ile element değişkeni güncelleyebilirsiniz.