Aula 98 — Otimização de código em Javscript

Até aqui, você aprendeu a escrever código JavaScript correto, moderno e organizado.

Agora damos um passo além:

como escrever código mais eficiente, performático e sustentável.

Isso é o que diferencia código que “funciona” de código que escala.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que significa otimizar código
• Identificar gargalos comuns
• Evitar otimizações prematuras
• Escrever código mais claro e eficiente

O que é otimização de código?

Otimizar código não é:

• escrever código “esperto”
• trocar legibilidade por micro performance

Otimizar código é:

• reduzir trabalho desnecessário
• evitar repetições inúteis
• melhorar a experiência do usuário

Regra de ouro da otimização

Otimização prematura costuma gerar:

• código difícil de manter
• ganhos irrelevantes
• mais bugs

Gargalos comuns em JavaScript

Na prática, problemas de performance costumam vir de:

• loops desnecessários
• manipulação excessiva do DOM
• funções executando vezes demais
• eventos disparando sem controle

Vamos ver exemplos.

Exemplo — repetição desnecessária

 function calcularTotal(itens) { let total = 0;

for (let i = 0; i < itens.length; i++) {
total += itens[i].preco;
}

return total;
}

console.log(calcularTotal([
{ preco: 10 },
{ preco: 20 },
{ preco: 30 }
])); // Saída será: 60

Esse código está correto.

Mas podemos torná-lo mais claro e igualmente eficiente:

 function calcularTotal(itens) { return itens.reduce((total, item) => total + item.preco, 0); }

console.log(calcularTotal([
{ preco: 10 },
{ preco: 20 },
{ preco: 30 }
])); // Saída será: 60

Aqui, a otimização é mais sobre clareza do que velocidade.

Evite trabalhar mais do que o necessário

❌ Ruim:

 for (let i = 0; i < lista.length; i++) { document.getElementById("resultado").innerHTML += lista[i]; } 

Esse código:

• acessa o DOM repetidamente
• é lento em listas grandes

✅ Melhor:

 const resultado = document.getElementById("resultado"); let html = "";

for (let i = 0; i < lista.length; i++) {
html += lista[i];
}

resultado.innerHTML = html;

Cache de valores importantes

Se um valor não muda, não o recalcule:

 const botao = document.querySelector("#btn");

botao.addEventListener("click", () => {
// usa botao sem buscar novamente
});

Isso parece pequeno, mas em aplicações grandes faz diferença.

Performance não é só velocidade

Performance também envolve:

• tempo de resposta
• consumo de memória
• fluidez da interface

E é por isso que, nas próximas aulas, vamos falar de:

• controle de eventos (debounce e throttle)
• vazamentos de memória
• segurança

Mentalidade correta

Sempre se pergunte:

• isso roda quantas vezes?
• isso poderia rodar menos?
• isso está claro?

Código claro costuma ser mais rápido do que código “esperto”.

Na próxima aula, vamos atacar um dos maiores vilões da performance: Debounce e Throttle.