🚀 Capítulo 19: Boas Práticas
🎯 Objetivo da Aula
Ao final desta aula, você conhecerá boas práticas para manipular o DOM de forma rápida, evitando travamentos na tela do usuário (evitando reflows excessivos).
🏢 O Cenário Prático (Seu Desafio)
Se você tentar adicionar 1000 clones na lista de uma vez usando appendChild dentro de um loop, a nave vai travar! Seu desafio é usar um DocumentFragment para adicionar todos de uma vez só!
🧠 Fundamentos: A Teoria Traduzida
Toda vez que você usa o appendChild, o navegador precisa recalcular toda a tela. Se você fizer isso 1000 vezes seguidas, a página fica lenta.
A Solução: DocumentFragment
É como uma “caixa virtual” onde você joga os elementos dentro. Depois que a caixa está cheia, você joga a caixa inteira no HTML de uma vez só! O navegador só recalcula a tela uma única vez.
📖 Exemplo Guiado: Usando Fragmentos
const lista = document.querySelector('#lista');
// Criamos a caixa virtual
const fragmento = document.createDocumentFragment();
for (let i = 1; i <= 100; i++) {
const item = document.createElement('li');
item.innerText = 'Item ' + i;
// Adiciona na caixa virtual (não mexe na tela ainda!)
fragmento.appendChild(item);
}
// Adiciona tudo na tela de uma vez só!
lista.appendChild(fragmento);🛠️ Prática Obrigatória 1
Refatore um código seu que adiciona múltiplos elementos para usar o DocumentFragment.
🛠️ Prática Obrigatória 2
Tente usar o innerHTML com uma string gigante concatenada como outra alternativa para adicionar muitos elementos de uma vez.
🔑 Gabarito de Código/Fórmulas
Prática 1:
const fragment = document.createDocumentFragment();
// ... loop appendChild(fragment)
document.body.appendChild(fragment);