Alerta de otimização para loop ‘for’ em JavaScript

Poucas pessoas tem preocupação com questão de performance em códigos, especialmente do lado servidor onde os mesmo possuem grandes recursos computacionais de processamento. Nestes ambientes, códigos pouco otimizados praticamente não interferem por conta da alta capacidade destes ambientes. No entanto, é sempre bom estarmos atentos a técnicas simples que podem economizar estes recursos. Principalmente no lado cliente, onde estes recursos são mais escassos e são mais impactantes. Qualquer demora de processamento no lado do cliente gera impactos na usabilidade e afeta negativamente a experiência do usuário.

E este artigo veio para explicar uma maneira simples de nos atentarmos para esta questão de otimização de código em loops ‘for’ no JavaScript.

Esta nossa dica referente a uma pequena etapa de recálculo do tamanho em cada iteracao do loop ‘for’.

// O array
 var my_array = ["Drall","Consultoria","Ltda"];
 
// Maneira usualmente utilizada. Funciona, mas na maioria dos casos poderia ser melhor escrito em termo de performance
for (var i=0; i<my_array.length; i++) {
    // Funciona, mas a cada iteração será recalculado o tamanho do array, gerando uma operação extra
}
 

// Maneira melhor em termo de performance, mas não é uma forma muito difundida o que pode gerar dificuldade na leitura do código 
for (var i=0, z=my_array.length; i<z; i++) {
    // Agora o tamanho do array é calculado somente uma vez, na inicialização do loop
    // Bom para performance
    // Porém, mais difícil de ler o código para o programador
}

//Mesma coisa do código anterior, apenas retirando a contagem do tamanho do array de dentro da inicialização do loop 'for' para buscar tornar o código mais legível
var z=my_array.length
for (var i=0; i<z; i++) {
    // Agora o tamanho do array é calculado somente uma vez, antes do loop
    // Bom para performance
    // Melhor para o programador ler e entender o código para o programador
}


// Para alguns casos onde a ordem de execução de seleção dos elementos do array no código não importa, assim como desnecessidade de gerar complexidade para desinverter o valor do contador ao ser utilizado no código interno, este loop 'for', em termo de otimização, tem etapas a menos que os demais.
// A grande diferença é que ele executa a contagem decrescente
for (var i=my_array.length-1; i>=0; i-=1) {
  // Sem a necessidade de criação de uma segunda variável
  // A contagem irá até de +n até 0
}

Existem situações em que este recálculo é necessário por conta da lógica interna do loop. Mas na maioria das situações este recálculo é simplesmente desnecessário e gera mais uma etapa a cada ciclo, consumindo recursos desnecessários e afetando a performance. Obviamente para iterações com poucos elementos, este acrescimento de processamento será imperceptível. No entanto, quando lidar com quantidades maiores de dados e de ciclos, este processamento extra poderá afetar

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: