Como caro são chamadas de função JS (em comparação com a alocação de memória para uma variável)?
-
02-07-2019 - |
Pergunta
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.
Solução
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;
Outras dicas
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;
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.
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.
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.
@ 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]
}
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
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.