Fa riferimento a un selettore più veloce in jQuery di quello che effettivamente chiama il selettore? se sì, quanto fa la differenza?

Question

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

E 'una pratica migliore per fare questo:

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

Probabilmente sarebbe meglio la pratica di fare questo per il bene di mantenere codice pulito e modulare, ma lo fa fare la differenza prestazioni saggio? Ci vuole più tempo per elaborare rispetto all'altro? Grazie ragazzi.

Answer 1

Sì, quando si utilizza il selettore senza memorizzarlo in una variabile jQuery deve analizzare il DOM OGNI VOLTA.

Se avevi qualcosa come $(".class") jQuery avrebbe bisogno di trovare gli elementi con quella classe ogni volta che lo usi, ma se è memorizzato in una variabile usa l'identificatore univoco nella variabile. Non c'è bisogno di cercare.

Quindi sì, lo consiglio assolutamente di memorizzarlo in una variabile.

UPDATE: Aggiunto concatenamento in alternativa.

Se si usa solo il selettore in un unico luogo si può anche fare concatenamento che significa che si aggiunge un metodo dopo l'altro con la stessa notazione del punto in questo modo:

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

Answer 2

Sì. Si potrebbe anche concatenano esso:

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

Answer 3

E 'molto più veloce di utilizzare una variabile denominata invece di passare un selettore jQuery, una volta per ogni azione. Tuttavia, come già accennato, il concatenamento è una soluzione ottimale nella maggior parte dei casi. Puoi vederlo da solo. Ecco una prova che ho appena fatto:

<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:

Apparentemente Firefox fa un qualche tipo di caching e tre casi eseguire in modo molto simile. Dall'altra parte, Chrome e Safari hanno prestazioni piuttosto scarse nel caso 1, rispetto ai casi 2 e 3 (soprattutto all'aumentare del numero o dei nodi).