¿Debo almacenar en caché document.getElementById() en una variable o llamarlo cada vez?

Question

Tengo una gran cantidad de elementos que se generan y se hace referencia (mouseover, clics, cambios de posición) muchas veces.

Tengo los ID de esos elementos a mano. ¿Es aconsejable almacenar las llamadas document.getElementById(ID) en una variable, o es más rápido/tan rápido/lento para llamar al document.getElementById() cada vez?

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

Debe, por supuesto, volver a utilizar la referencia siempre que sea posible, pero puede que tenga que obtener una nueva referencia en cada cuerpo de la función.

Ejemplo:

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

Si se mantiene referencias más tiempo, es posible que ya no funcionan. Si, por ejemplo, obtiene innerHTML para una parte de la página y la almacena de nuevo, todos los elementos en esa parte se eliminan y vuelven a crear. Si tenía una referencia a uno de los elementos en esa parte, ese elemento ya no existe.

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

Answer 2

Es sin duda más rápido para almacenar los elementos de una variable, pero no por un amplio margen. Esto es algo diferente de un caso a otro y debe adaptarse para cada uno individualmente.

Tal vez el factor más importante es la legibilidad, creo que el acceso a los elementos directamente es más legible.

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

Answer 3

getElementById devuelve un nodo de elemento, que es esencialmente solo un objeto JavaScript. Puede asignar este objeto a una variable, lo que significa que la variable apuntará a este objeto cada vez que escriba esa variable en una etapa posterior. Así,

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

id1 ahora se refiere al elemento DOM con un id de id1. Si no se encontró ningún elemento con ese id, entonces document.getElementById devuelve nulo.

Si los elementos permanecen dentro del DOM y no se reemplazan, tiene sentido almacenarlos en una matriz, para que pueda hacer referencia a ellos tantas veces como lo desee sin ningún costo de rendimiento.

Si le ayuda, puede crear una función simple que lo haga por usted:

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

no hay una única respuesta correcta a esta pregunta. Todo depende de con lo que tienes que trabajar. Si está trabajando con una página que tiene una gran cantidad de elementos en el árbol DOM, es mejor guardar en la memoria caché las referencias y volver a utilizarlas, para acelerar el tiempo de búsqueda. Si está trabajando en una página pequeña, es mejor buscar elementos sobre la marcha y minimizar el consumo de memoria del navegador.

También depende de los navegadores a los que apunta. Por ejemplo, las versiones más recientes de Firefox tardan un poco en ajustar un elemento por primera vez, pero almacenan en caché la referencia internamente, por lo que la próxima vez que vaya a buscarla, será casi instantánea. IE, por otro lado, no almacena en caché los valores de búsqueda, pero su tiempo de búsqueda es mucho más rápido que Firefox en el primer intento.

Muchos frameworks modernos almacenarán en caché los elementos que encontraste para ti. Sin embargo, yo personalmente sigo prefiriendo usar document.getElementById la mayor parte del tiempo.Lo que hago, cuando necesito para almacenar en caché valores de búsqueda es el siguiente:

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

Se utiliza esta llamando registerElement y se lleva una identificación del elemento. Cuando necesite recuperar el valor, llame al ID de get_element que aprobó y, en la primera ejecución, buscará el elemento y lo guardará en caché, en cada llamada consecutiva solo devolverá el valor en caché.