Wydajność selektorów jQuery a zmienne lokalne

Question

Czy jest zalecane, aby w sytuacji, gdy potrzebuję uzyskać dostęp do wyniku selektora jQuery więcej niż jeden raz w zakresie funkcji, uruchomić selektor raz i przypisać go do zmiennej lokalnej?

Wybacz mój banalny przykład tutaj, ale myślę, że ilustruje to pytanie. Tak, będzie to szybsze wykonywanie kodu:

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

niż ten kod:

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

Jeśli nie ma różnicy, może ktoś wyjaśnić, dlaczego? Czy elementy jQuery są buforowane po ich wybraniu, aby kolejne selektory nie musiały ponownie przeszukiwać domeny?

Answer 1

Ponowne odwołanie wyboru, pierwszym przypadku, to zdecydowanie szybciej. Oto test zrobiłem jako dowód:

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

tym ostatnim przypadku przedefiniowania swoich selektorów, jest podawana jako ~ 35% wolniej.

Answer 2

Przechowywanie odniesienia w zmiennej lokalnej będzie szybsze niż każdorazowe uruchamianie kodu wyboru. Chodzi po prostu o to, że nie musisz wykonywać ŻADNEGO kodu, aby znaleźć odpowiedni element (y), gdy przechowujesz go w zmiennej. Moja zasada polega na przechowywaniu wyników wyszukiwania jQuery w zmiennej, jeśli zamierzam użyć jej więcej niż raz.

Answer 3

Inną opcją jest tu użyć each zamiast powtarzać selektor, a to wiąże się praca, raz po raz

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

not forget to jedno:

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

Answer 5

Ty rzeczywiście zapominając prawdziwie pamięci podręcznej podejście.

Rzeczą z jQuery jest to, że pierwsze wyszukiwanie: $('.selector') jest kosztowne. Ale potem, łańcuchowanie na nim swoich akcji, lub przypisanie jej do zmiennej i wykonanie twoich działań na zmiennej nie ma większego znaczenia. Najważniejszym osiągnięciem, jakie można uzyskać, jest buforowanie elementu jeszcze bardziej i nie przypisywanie selektora jQuery do każdej iteracji wywołania funkcji.

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

Takie podejście jest prawie dwa razy tak szybko, jak najszybciej wersja od innych podejść sugerowane.

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

Uwaga: W przypadku zmiany DOM podczas jego życia, można zaktualizować element zmienną ze świeżym doboru elementów.