Devo memorizzare cache document.getElementById() in una variabile o chiamarla ogni volta?

Question

Ho molti elementi che vengono generati e referenziati (mouseover, clic, cambi di posizione) un sacco di volte.

Ho gli ID di questi elementi a portata di mano. È consigliabile archiviare le chiamate document.getElementById(ID) in una variabile oppure è più veloce/altrettanto veloce/lento chiamare ogni volta document.getElementById()?

var app = []; 
var app.elements = []; 
//i can store ['id1', 'id2', 'id3'] 
//OR ['id1' => document.getElementById('id1'), 'id2' => document.getElementById('id2'), 'id3' => document.getElementById('id3')] 

Answer 1

Si dovrebbe ovviamente riutilizzare il riferimento laddove possibile, ma potrebbe essere necessario ottenere un nuovo riferimento in ciascun corpo di funzione.

Esempio:

var e1 = document.getElementById('id1'); 
e1.innerHTML = 'test'; 
e1.className = 'info'; 

Se si mantiene riferimenti più a lungo, si potrebbe scoprire che non funzionano più. Se ad esempio ottieni innerHTML per una parte della pagina e lo memorizza, tutti gli elementi in quella parte vengono rimossi e ricreati. Se hai un riferimento a uno degli elementi in quella parte, quell'elemento non esiste più.

// This will recreate all elements inside the 'parent' element: 
document.getElementById('parent').innerHTML += 'test'; 

Answer 2

È sicuramente più veloce memorizzare gli elementi in una variabile, ma non con un ampio margine. Questo è qualcosa che è diverso da caso a caso e dovrebbe essere adattato per ciascuno individualmente.

Forse il fattore più importante è la leggibilità, credo che l'accesso diretto agli elementi sia più leggibile.

theMainButton.style.color = "red"; 
// vs. 
document.getElementById("theMainButton").style.color = "red"; 

Answer 3

getElementById restituisce un nodo elemento, che è essenzialmente solo un oggetto JavaScript. È possibile assegnare questo oggetto a una variabile, nel senso che la variabile punterà a questo oggetto ogni volta che si digita tale variabile in una fase successiva. Quindi,

var id1 = document.getElementById('id1'); 

id1 ora si riferisce all'elemento DOM con id di id1. Se non è stato trovato alcun elemento con quello id, allora document.getElementById restituisce null.

Se gli elementi rimangono all'interno del DOM e non vengono sostituiti, è opportuno memorizzarli in un array, in modo da poterli fare riferimento tutte le volte che si desidera senza costi di prestazioni.

Se aiuta, è possibile creare una semplice funzione di farlo per voi:

function getElementsByIds(/* id1, id2 ... */) { 

    var elems = []; 

    for (var i = 0, l = arguments.length; i < l; i++) { 
     elems[i] = document.getElementById(arguments[i]); 
    } 

    return elems; 

} 

app.elements = getElementsByIds('id1', 'id2', 'id3'); 

Answer 4

non esiste una sola risposta giusta a questa domanda. Dipende tutto da cosa devi lavorare. Se stai lavorando con una pagina che ha una massiccia quantità di elementi nell'albero DOM, è meglio memorizzare nella cache i riferimenti e riutilizzarli, per velocizzare il tempo di ricerca. Se stai lavorando su una piccola pagina, è meglio cercare gli elementi in tempo reale e ridurre al minimo il consumo di memoria del browser.

Dipende anche dai browser scelti come target. Ad esempio, le versioni più recenti di Firefox richiedono un po 'di tempo per mettere a punto un elemento, ma memorizzano il riferimento internamente, quindi la prossima volta che lo cercherete, sarà quasi istantaneo. IE, d'altra parte, non memorizza nella cache i valori di ricerca, ma il tempo di ricerca è molto più veloce di Firefox al primo tentativo.

Un sacco di quadri moderni memorizzeranno nella cache gli elementi che hai trovato per te. Tuttavia, io personalmente preferisco comunque utilizzare document.getElementById la maggior parte del tempo.Quello che faccio io, quando ho bisogno di memorizzare nella cache i valori di ricerca è la seguente:

function registerElement(id) 
{ 
    if (!this["get_" + id]) 
     this["get_" + id] = function() { 
      var element = document.getElementById(id); 
      this["get_" + id] = function() {return element;}; 
      return element; 
     } 
} 

È possibile utilizzare questo chiamando registerElement e passando un ID dell'elemento. Quando hai bisogno di recuperare il valore, chiami l'id get_element che hai passato e alla prima esecuzione cercherà l'elemento e lo metterà in cache, in ogni chiamata consecutiva verrà restituito solo il valore memorizzato nella cache.