Quel est le coût des appels de fonction JS (par rapport à l'allocation de mémoire pour une variable)?

Question

Étant donné le code JS comme celui-ci:

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

Le code serait-il plus rapide si nous plaçons le résultat de getElementsByName dans une variable avant la boucle et que nous utilisons ensuite la variable après cela?

Je ne suis pas sûr de l'ampleur de l'effet dans la vie réelle, le résultat de getElementsByName ayant généralement < 10 éléments. J'aimerais quand même comprendre les mécanismes sous-jacents.

De plus, s’il ya autre chose d’intéressant à propos des deux options, dites-le-moi.

Answer 1

Certainement. La mémoire nécessaire pour stocker ne serait qu'un pointeur sur un objet DOM, ce qui est nettement moins pénible que d'effectuer une recherche DOM chaque fois que vous devez utiliser quelque chose!

Code idéal:

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

Answer 2

La mise en cache de la recherche de propriété peut aider, mais c La longueur du tableau avant de démarrer la boucle s’est révélée plus rapide.

Ainsi, déclarer une variable dans la boucle contenant la valeur de scale_select.length accélèrerait quelque peu la boucle entière.

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

Une implémentation intelligente de DOM ferait sa propre mise en cache, invaliderait le cache lorsque quelque chose changerait. Mais on ne peut pas compter sur tous les DOM aujourd'hui pour être aussi intelligents ( toux IE toux ), il est donc préférable de le faire vous-même.

Answer 4

  

En principe, le code serait-il plus rapide si nous plaçons le résultat de getElementsByName dans une variable avant la boucle, puis si nous utilisons la variable après?

oui.

Answer 5

Utilisez des variables. Ils ne sont pas très chers en JavaScript et les appels de fonctions sont nettement plus lents. Si vous bouclez au moins 5 fois sur document.getElementById (), utilisez une variable. L’idée ici n’est pas seulement que l’appel de fonction est lent, mais cette fonction spécifique est très lente car elle essaie de localiser l’élément avec l’id donné dans le DOM.

Answer 6

@ Oli

La mise en cache de la propriété length des éléments extraits dans une variable est également une bonne idée:

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

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

Answer 7

Il est inutile de stocker scaleSelect.length dans une variable distincte; c'est en fait déjà dans one - scaleSelect.length est simplement un attribut du tableau scaleSelect et, en tant que tel, il est aussi rapide d'accès que toute autre variable statique.

Answer 8

Je pense que oui. À chaque boucle, le moteur doit réévaluer l'instruction document.getElementsByName.

Par contre, si la valeur est enregistrée dans une variable, alors elle a déjà la valeur.