DOM e Virtual DOM

Toda página web, por trás de cada clique, botão e animação, é sustentada por uma estrutura invisível L uma árvore.

Essa árvore é o DOM, e sua versão otimizada é o Virtual DOM.

Mas afinal:
👉 O que é exatamente essa “árvore”?
👉 Por que ela existe?
👉 Como React, Vue e outros frameworks lidam com ela?
👉 E o que realmente acontece dentro do navegador quando você altera algo na tela?

Prepare-se: este post vai abrir o DOM por dentro, com profundidade e clareza.

O que é o DOM (Document Object Model)

O DOM é uma representação em árvore da sua página HTML.

Cada elemento (<div>, <button>, <p>) é um nó (node) nessa árvore.
Cada atributo (id, class, src, etc.) é um ramo ligado a esse nó.

📘 Em outras palavras:
O DOM é a forma como o navegador entende e organiza o seu HTML, permitindo que JavaScript, CSS e o próprio navegador interajam com ele.

Analogia simples:

Pense no DOM como uma árvore genealógica da sua interface.

A <html> é o “tronco principal”.
Dentro dela, há dois grandes galhos: <head> e <body>.
Dentro do <body> estão as “famílias” de elementos: <header>, <main>, <footer> etc.
Cada <div> pode ter “filhos” (outros elementos) e atributos (como “características”).

Visualmente, é algo assim:

html
 ├─ head
 │   └─ title
 └─ body
     ├─ h1
     ├─ p
     └─ button

Essa estrutura é chamada de Árvore DOM.

2. O DOM é vivo e caro (em termos de performance)

O DOM não é apenas uma estrutura estática de nós.
Ele é vivo, ou seja, o navegador está constantemente monitorando e reagindo a qualquer mudança que aconteça na página.

Isso significa que toda modificação no DOM, seja via JavaScript, CSS ou até uma simples mudança de atributo, dispara uma série de etapas internas complexas no motor do navegador.

O ciclo interno de atualização do navegador

Quando você altera algo no DOM, o navegador precisa executar uma sequência de tarefas para refletir essa mudança visualmente:

Recalculate Style (Recalcular estilos)
O navegador verifica quais regras CSS foram afetadas e recalcula os estilos para cada elemento impactado.
Exemplo: mudar uma class pode forçar o navegador a recalcular centenas de regras CSS.
Reflow (Reorganizar o layout)
Depois de recalcular os estilos, o navegador precisa reorganizar o layout, ou seja, reposicionar e redimensionar elementos na tela, de acordo com as novas dimensões e dependências.
O Reflow pode afetar desde um pequeno bloco até toda a página, dependendo do elemento alterado.
Repaint (Re-renderizar)
Por fim, o navegador redesenha (pinta) na tela os pixels que mudaram.
Isso inclui cor, texto, sombras, bordas e até efeitos visuais.
Mesmo pequenas mudanças podem forçar o navegador a redesenhar várias camadas de renderização.

Exemplo prático


document.getElementById("titulo").innerText = "Novo título";

Parece simples, certo? Mas por trás dessa linha, o navegador faz muita coisa:

Localiza o nó <h1 id="titulo"> na árvore DOM.
Atualiza o valor de texto no nó.
Recalcula o tamanho e o posicionamento do texto.
Verifica se outros elementos foram deslocados (Reflow).
Desenha novamente o trecho afetado da tela (Repaint).

➡️ Em páginas pequenas, isso é imperceptível.
Mas em aplicações grandes (com centenas de componentes, listas longas ou animações), essas operações podem se tornar muito custosas, especialmente quando ocorrem várias vezes por segundo.

O Virtual DOM é uma camada intermediária inteligente que minimiza o número de modificações reais no DOM, tornando tudo muito mais rápido e eficiente.

3. O que é o Virtual DOM (e por que ele nasceu)

O Virtual DOM (VDOM) é uma cópia leve do DOM real, mantida na memória. Quando dizemos que o Virtual DOM é mantido na memória, estamos falando da memória RAM do dispositivo, e não do “DOM do navegador” propriamente.

O DOM real é uma estrutura criada pelo motor do navegador (por exemplo, Blink no Chrome, WebKit no Safari, Gecko no Firefox).
Ele é composto de nós C++ que representam cada tag do HTML, <div>, <img>, <h1>, etc.Esses nós têm muitos metadados: estilos, posições, referências a eventos, filhos, renderização, etc. É uma estrutura pesada e complexa, feita para o navegador renderizar pixels na tela.

Agora entra o Virtual DOM:
Ele é uma representação paralela dessa árvore do DOM, mas criada e mantida pela sua biblioteca/framework (React, Vue, Preact, etc.).

Ele não é o DOM do navegador.
Ele não aparece no DevTools (porque não é uma estrutura real da página).
Ele existe apenas em memória, ou seja, dentro do heap do JavaScript, o mesmo espaço onde vivem suas variáveis, arrays e objetos JS.

Frameworks como React e Vue não manipulam o DOM diretamente.
Eles criam uma representação virtual, e só aplicam as mudanças necessárias no DOM real, nada mais. isso evita reflows e repaints desnecessários, tornando tudo muito mais rápido e previsível.

O Virtual DOM é um objeto JavaScript (ou vários) que descreve o estado visual atual da interface.

Por exemplo, se você tem este componente React:

<h1 className="titulo">Olá</h1>

O React cria internamente algo mais ou menos assim (simplificando muito):


{
  type: 'h1',
  props: { className: 'titulo', children: 'Olá' },
  key: null
}

Isso é um nó virtual do DOM.
E toda a página é representada como uma árvore de objetos JavaScript como essa.

Onde isso “vive na memória”

Esses objetos do Virtual DOM vivem na RAM, dentro da área de execução do JavaScript, chamada heap.

📍 Fluxo simplificado:

O navegador carrega o bundle JS.
O React (ou Vue) inicializa sua estrutura interna.
O framework cria e mantém essa árvore virtual em memória, sem tocar no DOM real ainda.

A renderização real só acontece quando o framework decide aplicar essas mudanças,
e aí ele atualiza o DOM real através da API do navegador (document.createElement, appendChild, etc).

Por que fazer isso em memória é tão vantajoso?

Manipular o DOM real é caro e lento, porque ele é uma estrutura complexa, gerenciada pelo motor do navegador, com layout, renderização e estilos envolvidos.

Já mexer em objetos JavaScript em memória é rápido e barato:

Não há reflow nem repaint.
É só cálculo, nenhuma renderização visual.

Então o framework:

Atualiza o Virtual DOM (em memória);
Compara com o Virtual DOM anterior (diffing);
Descobre exatamente o que mudou;
Só então toca o DOM real minimamente (patch).

Analogia:

Imagine o DOM como uma árvore real, mexer nela é trabalhoso: cortar galhos, plantar de novo, etc.
O Virtual DOM é como um mapa dessa árvore num papel.

Você rabisca, faz alterações no papel, compara com a árvore real, e só muda os galhos que realmente precisam.

4. Como o Virtual DOM funciona (passo a passo)

Vamos entender o ciclo de atualização de um framework como React ou Vue:

1️⃣ Renderização inicial:

O componente gera uma estrutura em memória (Virtual DOM).
Essa estrutura é convertida em HTML e exibida no navegador.

2️⃣ Atualização de estado:

Quando algo muda (ex: setState, data() no Vue, etc.):

O framework recria o Virtual DOM baseado no novo estado.
Ele compara a nova árvore com a anterior (processo chamado Diffing).
Ele encontra as diferenças (mudanças reais).
Aplica apenas essas mudanças no DOM real (Reconciliation).

5. O algoritmo de Diffing (o cérebro do Virtual DOM)

Quando você muda o estado de um componente, o framework (React, Vue, etc.) precisa descobrir exatamente o que mudou na interface para atualizar o mínimo possível no DOM real. Quem faz isso é o algoritmo de diffing (ou reconciliamento).

6. Reconciliation: a sincronização final

Após identificar as diferenças, o framework aplica as mudanças no DOM real.

Esse processo é chamado de Reconciliation.

Apenas os nós alterados são atualizados.
Nenhum elemento extra é destruído ou recriado sem necessidade.
Tudo acontece de forma assíncrona e otimizada.

📊 Resultado:

Menos uso de CPU
Menos reflows e repaints
Maior responsividade da interface

7. Exemplo prático: React e Vue

🧱 React

function Contador() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Quando você clica em Incrementar:

O React recria o Virtual DOM (<p>Contagem: 1</p>).
Compara com o anterior (<p>Contagem: 0</p>).
Vê que só o texto mudou.
Atualiza somente o nó <p> no DOM real.

Nada mais é re-renderizado.

Vue

<template>
  <div>
    <p>Contagem: {{ count }}</p>
    <button @click="count++">Incrementar</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

O Vue faz o mesmo:
Cria um Virtual DOM com count=1, detecta a diferença, e atualiza apenas o <p>.

Internamente, ele usa uma implementação própria de diffing (inspirada no React Fiber, mas mais enxuta).

8. React Fiber e Vue Virtual DOM

As versões modernas do React e Vue evoluíram o conceito.

⚙️ React Fiber:

Divide a renderização em pequenas tarefas (frames).
Prioriza partes mais importantes da UI (como animações).
Evita travar o main thread.
Implementa Concurrent Rendering.

⚙️ Vue 3 Virtual DOM:

Usa um compilador inteligente para gerar render functions otimizadas.
Em vez de recriar tudo, o Vue sabe quais partes do template podem mudar.
Isso o torna mais performático e previsível.

Essas otimizações transformam o Virtual DOM em algo quase reativo, unindo o melhor do mundo declarativo com performance real.

9. Impacto em Performance e UX

Etapa	DOM Tradicional	Virtual DOM
Atualização de nós	Direta (lenta)	Diferencial (rápida)
Manipulação manual	Complexa	Declarativa
Escalabilidade	Ruim em UIs grandes	Excelente
Risco de bugs visuais	Alto	Baixo
Consumo de CPU	Alto em loops	Otimizado

💡 O Virtual DOM não é “mais rápido que o DOM” (o DOM é nativo e super otimizado).
Mas ele minimiza o número de interações diretas com o DOM real, que é onde o custo mora.

10. Quando o Virtual DOM é um problema

Sim, ele não é perfeito.

❌ Em aplicações extremamente simples (ex: landing page estática), o custo de criar o Virtual DOM pode ser maior que o ganho.
❌ Para animações frame a frame (ex: canvas, jogos, WebGL), o Virtual DOM não é eficiente.
✅ Para interfaces complexas, dinâmicas e reativas, ele é imbatível.

Por isso frameworks modernos evoluíram para soluções híbridas:

React Server Components
Vue’s Compiler Optimization
Islands Architecture (Astro, Qwik)

🧬 O DOM é a matéria; o Virtual DOM é a mente 🧠

O DOM real é a árvore física que o navegador entende.
O Virtual DOM é a mente que imagina, compara e decide como mudar essa árvore da forma mais eficiente.

DOM = Realidade
Virtual DOM = Inteligência

A beleza da engenharia frontend moderna está justamente em equilibrar essas duas camadas:

O que o usuário vê (DOM)
Como o código pensa (Virtual DOM)

Quem entende isso deixa de apenas “usar React” e passa a entender o cérebro da web.

Amanda | Engenheira Frontend

segunda-feira, 10 de novembro de 2025