Aula 52 — Performance no DOM

Até agora, aprendemos a criar elementos dinamicamente e a usar delegação de eventos.

Mas existe uma pergunta importante que todo desenvolvedor precisa fazer:

Como manipular o DOM sem deixar a página lenta?

Nesta aula, vamos entender o impacto das operações no DOM e aprender práticas que melhoram a performance das aplicações.

🎯 Objetivo da aula

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

• Entender por que o DOM é “caro”
• Evitar manipulações desnecessárias
• Reduzir reflows e repaints
• Escrever código mais eficiente
• Melhorar a experiência do usuário

Por que o DOM pode ser lento?

O DOM não é apenas JavaScript — ele representa a estrutura visual da página.

Sempre que você:

• Cria um elemento
• Insere no DOM
• Altera estilos
• Remove elementos

O navegador pode precisar:

• Recalcular o layout (reflow)
• Redesenhar a tela (repaint)

Erro comum: manipular o DOM em excesso

Veja este exemplo:

 const lista = document.getElementById("lista");

for (let i = 0; i < 100; i++) {
const li = document.createElement("li");
li.textContent = "Item " + i;
lista.appendChild(li);
}

Funciona, mas cada appendChild toca o DOM.

Boa prática: minimizar acessos ao DOM

Uma estratégia melhor é criar tudo primeiro e inserir de uma vez:

 
  const lista = document.getElementById("lista"); 
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = "Item " + i;
    fragment.appendChild(li);
  }
  lista.appendChild(fragment);

Evite consultas repetidas

Outro erro comum:

 
  for (let i = 0; i < 10; i++) 
    { 
      document.getElementById("status").textContent = i; 
    } 

Melhor:

 
      const status = document.getElementById("status");
      for (let i = 0; i < 10; i++) 
        {
        status.textContent = i;
        }

Prefira classes a estilos inline

Alterar vários estilos inline causa múltiplos repaints:

 
  element.style.color = "red"; element.style.fontSize = "20px"; element.style.margin = "10px"; 

Melhor:

 
    .destaque { color: red; font-size: 20px; margin: 10px; } 

 element.classList.add("destaque"); 

Leitura e escrita no DOM

Misturar leitura e escrita no DOM pode causar problemas de performance:

 
      const altura = element.offsetHeight; 
      element.style.height = altura + 10 + "px"; 

Sempre que possível:

• Leia tudo primeiro
• Depois escreva tudo

Delegação de eventos também ajuda

Como vimos na aula anterior:

• Menos listeners
• Menos memória
• Mais performance

Performance no DOM não é só sobre velocidade — é sobre boas decisões.

Na próxima aula, vamos aprender sobre manipulação de classes CSS, fechando esse bloco com chave de ouro.