Czy odwołanie selektora jest szybsze w jquery niż faktyczne wywoływanie selektora? jeśli tak, ile to robi różnicę?

Question

$(preview-button).click(...) 
$(preview-button).slide(...) 
$(preview-button).whatever(...) 

Czy jest to lepsze praktyki, aby to zrobić:

var preview-button = $(preview-button); 
preview-button.click(...); 
preview-button.click(...); 
preview-button).slide(...); 
preview-button.whatever(...); 

Prawdopodobnie byłoby lepiej praktyka to zrobić ze względu na utrzymanie czystości i kod modularny, ale czy to zrobić różnicę wydajności mądry? Czy przetwarzanie trwa dłużej niż inne? Dzięki chłopaki.

Answer 1

Tak, robi to, gdy używasz selektora bez zapisywania go w zmiennej jQuery musi analizować DOM KAŻDY CZAS.

Jeśli miałeś coś takiego, jak $(".class"), jQuery musiałaby znaleźć elementy z tą klasą za każdym razem, gdy jej użyjesz, ale jeśli jest przechowywana w zmiennej, używa unikalnego identyfikatora w zmiennej. Nie trzeba szukać.

Więc tak, całkowicie polecam przechowywanie go w zmiennej.

AKTUALIZACJA: Dodano łańcuchowe jako alternatywa.

Jeśli używasz tylko wybierak w jednym miejscu można również zrobić łańcuchowym co oznacza, dodać jedną metodę po drugim z tej samej notacji dot tak:

$(".class") 
     .click(function(){ ... }) 
     .mouseenter(function(){ ... }) 
     .css(...); 

Answer 2

Tak. Można również łańcuchowych:

$(preview-button) 
    .click(...) 
    .slide(...) 
    .whatever(...); 

Answer 3

Jest o wiele szybciej użyć zmiennej o nazwie zamiast przechodząc jQuery selektor raz dla każdego działania. Jednak, jak już wspomniano, łańcuchowanie jest w większości przypadków rozwiązaniem optymalnym. Możesz to zobaczyć sam. Oto test Właśnie tak:

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script> 
$(function(){ 
    //Try changing this value to see what happens as the number of nodes increases or decreases. 
    for(i=1;i<2905;i++){ 
    $('body').append('<div id="'+i+'">'+i+'</div>') 
    } 
    //Case 1: Query the DOM once for each action 
    var start = new Date().getTime(); 
    $('#2900').css('color','red'); 
    $('#2900').hide(); 
    $('#2900').show(); 
    $('#2900').html(new Date().getTime() - start); 

    //Case 2: Chaining. Each method passed $('this') to the next one 
    var start = new Date().getTime(); 
    $('#2901').css('color','blue').hide().show().html(new Date().getTime() - start); 

    //Case 3: Use of a named variable 
    var start = new Date().getTime(); 
    var a = $('#2902'); 
    a.css('color','green'); 
    a.hide(); 
    a.show(); 
    a.html(new Date().getTime() - start); 

}) 
</script> 

UPDATE:

Widocznie Firefox robi jakieś buforowanie i trzy przypadki wykonać bardzo podobnie. Z drugiej strony Chrome i Safari mają raczej słabą wydajność w przypadku 1, w porównaniu z przypadkami 2 i 3 (szczególnie w miarę wzrostu liczby lub węzłów).