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)
Essas operações são mais custosas do que simples cálculos em JavaScript.

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);
O DocumentFragment permite montar o conteúdo fora do DOM e inserir tudo de uma vez.

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.

Código simples e organizado tende a ser mais performático.

Resumo da aula para nunca mais esquecer

  • Manipular o DOM é custoso
  • Evite alterações repetidas
  • Use DocumentFragment quando possível
  • Reduza consultas ao DOM
  • Prefira classes CSS a estilos inline

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

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.