¿Qué tan caras son las llamadas a funciones JS (en comparación con la asignación de memoria para una variable)?

Question

Dado un código JS como ese aquí:

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

¿El código sería más rápido si pusiéramos el resultado de getElementsByName en una variable antes del ciclo y luego usáramos la variable después de eso?

No estoy seguro de cuán grande es el efecto en la vida real, con el resultado de getElementsByName normalmente tiene <10 artículos.De todos modos, me gustaría entender la mecánica subyacente.

Además, si hay algo más destacable sobre las dos opciones, dímelo.

Answer 1

Definitivamente.La memoria requerida para almacenar eso solo sería un puntero a un objeto DOM y eso es significativamente ¡Menos doloroso que hacer una búsqueda DOM cada vez que necesitas usar algo!

Código ideal:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

Answer 2

Almacenar en caché la búsqueda de propiedades puede ayudar, pero cSe ha demostrado que medir la longitud de la matriz antes de iniciar el ciclo es más rápido.

Entonces, declarar una variable en el bucle que contiene el valor de scale_select.length aceleraría un poco todo el bucle.

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;

Answer 3

Una implementación inteligente de DOM haría su propio almacenamiento en caché, invalidando el caché cuando algo cambia.Pero hoy en día no se puede contar con que todos los DOM sean tan inteligentes (tos ES DECIR tos) así que es mejor que lo hagas tú mismo.

Answer 4

En principio, ¿el código sería más rápido si pusiéramos el resultado de getElementsByName en una variable antes del ciclo y luego usáramos la variable después de eso?

Sí.

Answer 5

Utilice variables.No son muy caros en JavaScript y las llamadas a funciones son definitivamente más lentas.Si realiza un bucle al menos 5 veces sobre document.getElementById() utilice una variable.La idea aquí no es solo que la llamada a la función sea lenta, sino que esta función específica es muy lenta ya que intenta ubicar el elemento con la identificación dada en el DOM.

Answer 6

@oli

También es una buena idea almacenar en caché la propiedad de longitud de los elementos recuperados en una variable:

var scaleSelect = document.getElementsByName('scale_select');
var scaleSelectLength = scaleSelect.length;

for (var i = 0; i < scaleSelectLength; i += 1)
{
    // scaleSelect[i]
}

Answer 7

No tiene sentido almacenar scaleSelect.length en una variable separada;en realidad ya está en uno: scaleSelect.length es solo un atributo de la matriz scaleSelect y, como tal, es tan rápido de acceder como cualquier otra variable estática.

Answer 8

Creo que sí.Cada vez que se repite, el motor necesita volver a evaluar la declaración document.getElementsByName.

Por otro lado, si el valor se guarda en una variable, ya tiene el valor.