Como caro são chamadas de função JS (em comparação com a alocação de memória para uma variável)?

Question

Dado algum código JS como aquele aqui:

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

Será que o código mais rápido se nós colocamos o resultado de getElementsByName em uma variável antes do loop e, em seguida, usar a variável depois disso?

Não estou certo de quão grande o efeito é na vida real, com o resultado de getElementsByName tipicamente tendo <10 itens. Eu gostaria de entender a mecânica subjacentes de qualquer maneira.

Além disso, se há qualquer outra coisa notável sobre as duas opções, por favor me diga.

Answer 1

Com certeza. A memória necessária para armazenar que seria apenas um ponteiro para um objeto DOM e isso é significativamente menos doloroso do que fazer procurar um DOM cada vez que você precisa usar algo!

código Idealish:

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

Answer 2

Cache a pesquisa propriedade pode ajudar alguns, mas c doendo o comprimento da matriz antes de iniciar o ciclo tem provado ser mais rápido.

Assim declarar uma variável no circuito que mantém o valor da scale_select.length iria acelerar todo o ciclo alguma.

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

A implementação inteligente de DOM faria seu próprio cache, invalidar o cache quando algo muda. Mas nem todos DOM hoje pode ser contado para ser este inteligente ( tosse IE tosse ) por isso é melhor se você fizer isso você mesmo.

Answer 4

Em princípio, seria o código ser mais rápido se nós colocamos o resultado de getElementsByName em uma variável antes do loop e, em seguida, usar a variável depois disso?

Sim.

Answer 5

Utilize variáveis. Eles não são muito caros em JavaScript e chamadas de função são definitivamente mais lento. Se você malha pelo menos 5 vezes mais document.getElementById () usar uma variável. A idéia aqui não é apenas a chamada de função é lento, mas esta função específica é muito lento, uma vez que tenta localizar o elemento com o id dado no DOM.

Answer 6

@ Oli

Cache a propriedade comprimento dos elementos buscados em uma variável também é uma boa idéia:

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

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

Answer 7

Não há nenhum ponto de armazenar o scaleSelect.length em uma variável separada; na verdade é já em um -. scaleSelect.length é apenas um atributo da matriz scaleSelect, e como tal é tão rápido para o acesso como qualquer outra variável estática

Answer 8

Eu acho que sim. Toda vez que ele faz um loop, o motor necessita de reavaliar a declaração document.getElementsByName.

Por outro lado, se o valor é salvo em uma variável, do que allready tem o valor.