Otimização JavaScript: performance e velocidade

Artyom Dovgopol

Otimização de código é uma verdadeira arte. É como nas corridas: você pode simplesmente entrar e dirigir, ou pode ajustar cada parte do motor. A diferença é visível instantaneamente 😉

Pontos principais 👌

Introdução

Lembra daqueles jogos antigos que travavam mesmo em computadores potentes? Frequentemente não era o hardware, mas o código. O mesmo acontece com sites modernos - nem mesmo um servidor super poderoso vai salvar se seu JavaScript estiver mal otimizado.

Hoje, o tamanho médio do código JavaScript nos sites chega a 350 KB, e continua crescendo. Estudos mostram que cerca de 40% desse código nunca é usado durante o carregamento da página. Cada kilobyte extra significa tempo adicional de carregamento, especialmente em dispositivos móveis e conexões lentas.

Dicas práticas de otimização

Otimização de código é como arrumar uma mala grande para uma viagem. Existem várias maneiras comprovadas de fazer a bagagem ficar mais leve:

1. Remova o desnecessário. Lembra como sua mãe ensinava a fazer a mala? "Leve só o necessário!" O mesmo vale para JavaScript - cada linha extra de código significa milissegundos adicionais de carregamento.
   Code name example

   // Antes:
   function loadUserData(user) {
       console.log('Verificando dados');
       console.log('Carregando...');
       return user.name;
   }
   // Depois:
   function loadUserData(user) {
       return user.name;
   }

2. Carregue de forma inteligente. Coloque o essencial por cima, o resto por baixo. No código, usamos async e defer:
   Exemplo de código

   // Scripts principais - imediatamente
   <script src="core.js"></script>
   // Carregamentos secundários depois
   <script async src="stats.js"></script>
   <script async src="stats.js"></script>

Os problemas mais complexos de performance frequentemente têm soluções simples. Às vezes, basta posicionar corretamente async e defer nos seus scripts para o site carregar duas vezes mais rápido. Não é sobre otimizações complexas, mas sobre entender o básico

Carregamento lazy

Imagine um restaurante onde o chef prepara todos os pratos antecipadamente - alguns podem estragar e a cozinha está sempre caótica. Um chef esperto cozinha conforme os pedidos chegam.

Exemplo de código

// Carregar funcionalidade pesada
// apenas quando necessário
button.addEventListener(
  'click', 
  async () => {
    const { heavyF } = await import(
      './heavy-f.js'
    );
    heavyF();
  }
);

DOM e como trabalhar com ele

Trabalhar com o DOM frequentemente se torna um gargalo de performance. Aqui está um exemplo clássico de código ineficiente que você pode encontrar em muitos sites:

// Erro comum ao trabalhar com DOM
for (let i = 0; i < 100; i++) {
document.body.innerHTML += 'Bloco';
}
// Versão otimizada
const container = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
container.appendChild(document.createElement('div'));
}
document.body.appendChild(container);

E mais sobre performance...

Confira nosso artigo O que é Web 3.0 e o que significa para a evolução da Internet, onde explicamos em detalhes como o padrão Web 3.0 está mudando as abordagens de performance em aplicações web

Leituras recomendadas 🤓

"JavaScript: The Good Parts", Douglas Crockford

Se Douglas Crockford escrevesse um livro de receitas, seria este. Apenas as melhores receitas de JavaScript.

Na Amazon

"Eloquent JavaScript", Marijn Haverbeke

Marijn Haverbeke escreveu este livro como se estivesse contando uma história interessante, não ensinando programação.

Na Amazon

"High Performance JavaScript", Nicholas C. Zakas

O livro de cabeceira para quem quer que seu código voe, não rasteje.

Na Amazon

Conclusão

A otimização de JavaScript não é uma tarefa única - é um processo contínuo de melhorias. Comece com passos simples: remova código não utilizado, configure o carregamento correto de scripts, implemente carregamento lazy. Cada pequena melhoria soma para um aumento significativo na performance.