Prestazioni dei selettori jQuery vs variabili locali

Question

È consigliabile che, quando è necessario accedere al risultato di un selettore jQuery più di una volta nell'ambito di una funzione, eseguo il selettore una sola volta e lo assegni a una variabile locale?

Perdonare il mio esempio banale qui, ma penso che illustri la domanda. Quindi, sarà questo codice eseguire più velocemente:

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

di questo codice:

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

Se non v'è alcuna differenza, qualcuno può spiegare perché? Gli elementi della cache di jQuery dopo averli selezionati in modo che i selettori successivi non debbano preoccuparsi di cercare nuovamente nella dom?

Answer 1

Riusare il riferimento di selezione, il tuo primo caso, è sicuramente più veloce. Ecco un test che ho fatto come prova:

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

Quest'ultimo caso, ridefinendo i vostri selettori, viene segnalato come ~ 35% più lento.

Answer 2

Memorizzare il riferimento in una variabile locale sarà più veloce di eseguire il codice di selezione ogni volta. Si tratta semplicemente di non dover eseguire QUALSIASI codice per trovare gli elementi appropriati quando lo si archivia in una variabile. La mia regola generale è quella di memorizzare i risultati della ricerca jQuery in una variabile se la userò più di una volta.

Answer 3

Un'altra opzione è quella di utilizzare un each invece di ripetere il selettore e è associato il lavoro, di volta in volta

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

Non dimenticare questo:

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

Answer 5

Si sta effettivamente dimenticare l'approccio veramente nella cache.

La cosa con jQuery è che la ricerca iniziale: $('.selector') è costosa. Ma dopo, concatenare le tue azioni su di esso o assegnarle a una variabile ed eseguire le tue azioni sulla variabile non importa molto. Il guadagno di prestazioni principale che si può ottenere è il caching dell'elemento ancora di più e non si assegna al selettore jQuery ogni iterazione della propria chiamata di funzione.

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

questo approccio è quasi due volte più veloce della versione più veloce rispetto agli altri approcci suggerito.

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

Nota: se le modifiche DOM durante il suo ciclo di vita, è possibile aggiornare la variabile element con una nuova selezione di elementi.