Mejor práctica para la aplicación web HTML5: ¿usa getElementByID o almacena una referencia?

Question

Estoy desarrollando una de mis primeras aplicaciones web con HTML5, específicamente dirigida a iPhones.

Como soy bastante nuevo en esto, intento desarrollar buenos hábitos de codificación, seguir las mejores prácticas, optimizar el rendimiento y minimizar la carga en el iPhone con recursos limitados.

Una de las cosas que debo hacer frecuentemente ... Tengo numerosos divs (cada uno de los cuales tiene una identificación única) que estoy actualizando con frecuencia (p. Ej., Con innerHTML), o modificando (p. Ej., Atributos de estilo con transiciones y transformaciones de webkit).

En general, ¿es mejor usar getElementByID cada vez que necesito un identificador para div, o debo almacenar referencias a cada div al que accedo en variables "globales" al inicio?

(utilizo "global" entre comillas porque realmente acabo de obtener una verdadera variable global - es un objeto que almacena todas mis variables "globales" como propiedades).

Supongo que al usar getElementByID cada vez debe tener cierta sobrecarga, ya que la función necesita recorrer el DOM para encontrar el div. Pero no estoy seguro de qué tan exigente o eficiente sea esta función.

El uso de variables globales para almacenar identificadores para cada elemento debe consumir algo de memoria, pero no sé si estas referencias requieren solo una cantidad trivial de RAM, o más.

Entonces, ¿cuál es mejor? O bien, ¿ambas opciones consumen una cantidad tan trivial de recursos de los que debería preocuparme, lo que produce un código más legible y mantenible?

¡Muchas gracias de antemano!

Answer 1

"En general - ¿Me conviene utilizar GetElementByID cada vez que necesite un identificador para un div, o debería almacenar referencias a cada div"

Cuando usted está llamando getElementById, le estás pidiendo que realice una tarea. Si no espera un resultado diferente cuando llama al mismo método con el mismo argumento, parece lógico almacenar en caché el resultado.

"Asumo usando GetElementByID cada vez que debe tener algo de sobrecarga, ya que la función tiene que recorrer el DOM para encontrar el div. Pero, no estoy seguro de cómo gravar o eficiente esta función es".

En los navegadores modernos, especialmente, es muy rápido, pero no tan rápido como buscar una propiedad en su objeto global.

"Uso de variables globales para almacenar maneja a cada elemento debe consumir algo de memoria, pero no sé si estas referencias requieren sólo una cantidad insignificante de RAM, o más que eso."

Trivial. Es solo un puntero a un objeto que ya existe. Si elimina el elemento del DOM sin intención de volver a utilizarlo, entonces por supuesto querrá soltarlo.

"Por lo tanto - lo que es mejor o, hacer las dos opciones consumen una cantidad tan trivial de recursos que sólo debería preocuparse de que produce más legible, código mantenible??"

Depende completamente de la situación. Si solo lo está buscando un par de veces, entonces puede que no encuentre que valga la pena agregarlo a su objeto global. Cuanto más se necesita buscar el mismo elemento, más sentido tiene el almacenarlo en caché.

---

Here's a jsPerf test para comparar. Por supuesto, el tamaño de su DOM así como la longitud del recorrido del alcance variable y el número/profundidad de las propiedades en su objeto global jugarán algún papel.

Answer 2

Usar una variable local o incluso una propiedad de objeto es mucho más rápido que getElementById(). Sin embargo, ambos son tan rápidos que su rendimiento es generalmente irrelevante en comparación con cualquier otra operación que pueda hacer una vez que tenga el elemento. La configuración de eventos de una sola propiedad en el elemento es de órdenes de magnitud más lentos que la recuperación de cualquier método.

Así que la razón principal para almacenar en caché es un elemento para evitar la document.getElementById más largo aliento (... sintaxis, o para evitar que las cadenas elemento de identificación dispersos por todo su código.