Perché memorizzare oggetti jQuery nella cache?

Question

Quindi, perché dovremmo memorizzare gli oggetti jQuery?

Nel seguente scenario:

var foo = $('#bar'); 
foo.attr('style','cool'); 
foo.attr('width','123'); 

$('#bar').attr('style','cool'); $('#bar').attr('width','123');

Perché è la prima opzione molto meglio che la seconda opzione?

Se è a causa di prestazioni, come si ridurre il consumo?

Answer 1

Poiché la funzione jQuery contiene molto codice, il che comporta un sovraccarico non necessario se lo si esegue più volte con gli stessi ingressi che prevedono le stesse uscite. Memorizzando il risultato nella cache, memorizzi un riferimento all'elemento esatto o al set di elementi che stai cercando, quindi non devi cercare di nuovo nell'intero DOM (anche se è una ricerca abbastanza veloce). In molti casi (pagine semplici con piccole quantità di codice) non noterai alcuna differenza, ma nei casi in cui lo fai può diventare una grande differenza.

si può vedere questo in azione per testing your example in jsPerf.

Si può anche pensare ad esso come un esempio del modello di refactoring Introduce Explaining Variable a fini di leggibilità, in particolare con esempi più complessi di quello nella domanda.

Answer 2

Il selettore jQuery $('#foo') cerca nell'intero DOM gli elementi corrispondenti e quindi restituisce i risultati.

Caching questi risultati significa che jQuery non deve cercare il DOM ogni volta che il selettore viene utilizzato.

MODIFICA: document.getElementById() è ciò che jQuery utilizza per cercare nel DOM, ma non c'è mai abbastanza jQuery.