Quanto costano le chiamate alle funzioni JS (rispetto all'allocazione di memoria per una variabile)?

Question

Dato un codice JS come quello qui:

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

Il codice sarebbe più veloce se mettessimo il risultato di getElementsByName in una variabile prima del ciclo e poi usassimo la variabile dopo?

Non sono sicuro di quanto sia grande l'effetto nella vita reale, con il risultato di getElementsByName che in genere ha < 10 articoli. Mi piacerebbe comunque capire la meccanica di base.

Inoltre, se c'è qualcos'altro degno di nota nelle due opzioni, per favore dimmelo.

Answer 1

Sicuramente. La memoria richiesta per archiviare sarebbe solo un puntatore a un oggetto DOM ed è significativamente meno doloroso che fare una ricerca DOM ogni volta che devi usare qualcosa!

Codice idealista:

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

Answer 2

La memorizzazione nella cache della ricerca della proprietà potrebbe aiutare alcuni, ma c che fa male al la lunghezza dell'array prima di avviare il loop si è dimostrata più veloce.

Quindi dichiarare una variabile nel ciclo che contiene il valore di scale_select.length accelererebbe un po 'l'intero ciclo.

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

Un'implementazione intelligente di DOM farebbe la propria memorizzazione nella cache, invalidando la cache quando qualcosa cambia. Ma non tutti i DOM oggi possono essere considerati così intelligenti ( tosse IE tosse ), quindi è meglio se lo fai da soli.

Answer 4

  

In linea di principio, il codice sarebbe più veloce se mettessimo il risultato di getElementsByName in una variabile prima del ciclo e poi usassimo la variabile dopo?

Sì.

Answer 5

Usa variabili. Non sono molto costosi in JavaScript e le chiamate di funzione sono decisamente più lente. Se esegui il ciclo almeno 5 volte su document.getElementById () usa una variabile. L'idea qui non è solo la chiamata di funzione è lenta, ma questa funzione specifica è molto lenta in quanto tenta di individuare l'elemento con l'id specificato nel DOM.

Answer 6

@ Oli

Anche la memorizzazione nella cache della proprietà length degli elementi recuperati in una variabile è una buona idea:

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

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

Answer 7

Non ha senso archiviare scaleSelect.length in una variabile separata; in realtà è già in uno - scaleSelect.length è solo un attributo dell'array scaleSelect e come tale è veloce come qualsiasi altra variabile statica.

Answer 8

Penso di si. Ogni volta che esegue un ciclo, il motore deve rivalutare l'istruzione document.getElementsByName.

D'altra parte, se il valore viene salvato in una variabile, allora ha già il valore.