¿Por qué es más rápido acceder al DOM a través de una variable en caché?

Question

Estoy tratando de mejorar mi conocimiento de JavaScript y al buscar algunas "mejores prácticas", alguien me señaló que es más rápido almacenar en caché el documento DOM y luego acceder a través de esa var en lugar de acceder al documento directamente.

Puede ver los resultados aquí, en una edición que hice en jsperf: http://jsperf.com/jquery-document-cached-vs-uncached/3 (edit: el título tiene "jsquery" porque esa era la prueba original, mi edición contiene JavaScript básico, el marco no hace ninguna diferencia)

Esto realmente me da curiosidad. Básicamente, estoy introduciendo una nueva variable en la ecuación, ¿cómo puede eso hacer las cosas más rápidas en lugar de más lentas?

Por lo que sé, "imprimir a" debería ser mejor que "b = a; imprimir b" (cifra de discurso) ¿Qué hay de diferente en este caso?

Answer 1

creo que he encontrado una explicación here (el énfasis en la última parte es mío):

puntero tienda referencias a objetos en el navegador. Utilice esta técnica para reducir los viajes del recorrido DOM almacenando referencias a los objetos del navegador durante la creación de instancias para su uso posterior. Por ejemplo, si no es esperando que su DOM cambie, debe almacenar una referencia a DOM o jQuery objetos que va a utilizar cuando se crea su página; Si está construyendo una estructura DOM como una ventana de diálogo, asegúrese de almacenar algunas referencias útiles dentro de objetos DOM dentro de la instanciación , por lo que no necesita encontrar el mismo objeto DOM sobre cuando un usuario hace clic en algo o arrastra el diálogo ventana.Si no ha almacenado una referencia a un objeto DOM, y necesita para iterar dentro de una función, puede crear una variable local que contiene una referencia a ese objeto DOM, esto aumentará considerablemente la velocidad de la iteración ya que la variable local se almacena en la parte más accesible de la pila.

Por lo tanto, si entiendo correctamente, el almacenamiento en memoria caché del DOM en una variable local facilita el acceso en la pila de memoria, lo que aumenta la velocidad de ejecución.

Answer 2

document no es como una variable común de Javascript. No hay forma de saber qué extraña magia está pasando bajo las sábanas cuando se accede a sus atributos, especialmente el DOM, que puede crearse bajo demanda desde las estructuras internas del navegador.