Esiste una differenza di prestazioni tra il selettore jquery o una variabile

Question

Ultimamente mi chiedevo se ci fosse una differenza di prestazioni tra ripetere il selettore ancora e ancora o semplicemente usare un var e memorizzare il selettore in quello e fare riferimento ad esso.

$('#Element').dothis();

$('#Element').dothat();

$('#Element').find('a').dothat();

o solo

var Object = $('#Element');

Object.dothis();

Object.dothat();

$('a', Object).dothat();

Preferisco il secondo modo perché sembra più pulito ed è meglio mantenibile.

Answer 1

C'è sicuramente una differenza di prestazioni, poiché non è necessario eseguire ogni volta sfrigolio, ma c'è anche una differenza di funzionalità. Se la dom cambia tra la 1a e la 3a chiamata, l'oggetto jQuery memorizzato nella cache conterrà comunque il vecchio set di elementi. Questo può accadere spesso se si memorizza nella cache un set e lo si utilizza in un callback.

Answer 2

Preferisco il secondo modo. Sarà più facile mantenere il codice anche se un ID elemento o una classe cambiano.

Answer 3

C'è un altro modo veloce. È veloce come il tuo secondo codice.

$('#Element')
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Answer 4

spendendo sul metodo di Ghommey

var Object = $('#Element');

Object
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Più veloce e memorizza l'oggetto per un uso successivo.

Answer 5

Il secondo modo ha un vantaggio in termini di prestazioni. Può essere o non essere eccezionale, ma è meglio. Nella prima versione, stai facendo dom traversal 4 volte, nella seconda fai solo 2.

Articolo abbastanza buono su come accelerare jQuery qui: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

Answer 6

La memorizzazione dei risultati dalla selezione di jQuery in una variabile è più rapida. Questo perché jQuery non deve necessariamente cercare i risultati ogni volta che provi ad accedervi.

Ho messo insieme alcune metriche delle prestazioni: http://jsperf.com/jquery-selectors variabile -Vs-memorizzati

Su Chrome 26.0.1410.63 su Mac OS X 10.8.2:
Selezione: 40.276 ops / sec
Memorizzazione della variabile: 594.031.358 ops / sec