O Virtual DOM é um dos conceitos-chave por trás da performance e da eficiência de frameworks como React e Vue. Se você já entende a estrutura do Document Object Model (DOM), este artigo irá mostrar por que o Virtual DOM existe e como ele resolve os problemas de desempenho na web moderna.
Coisas importantes de saber antes de começarmos:
- O DOM (Document Object Model) é a representação dos elementos de uma página. Se você precisa de uma base sólida sobre este conceito, recomendamos a leitura do nosso artigo: Entendendo o DOM: o Coração da Web.
- O Virtual DOM é um mecanismo de software que manipula o DOM Real de forma otimizada.
- Embora não tenha sido inventado pelo React, faremos nossos estudos focados em como ele funciona nesse ecossistema.
O DOM é Lento? Ele se Torna Lento!
O problema não está na velocidade dos objetos do DOM em si, que são rápidos. O que torna o processo de manipulação lento é o trabalho subsequente que o navegador é forçado a fazer toda vez que o DOM é alterado.
Toda vez que o JavaScript modifica um nó do DOM, o navegador precisa executar uma série de etapas caras e complexas:
- Recalcular o CSS: Descobrir as regras de estilo que se aplicam aos elementos afetados.
- Layout (Reflow): Recalcular a posição e o tamanho exato de cada elemento na tela.
- Paint (Repaint): Repintar (renderizar) a área afetada na tela do navegador.
Quando você faz uma alteração simples como:
JavaScript
document.getElementById('meuElementId').innerHTML = "New Value"
O navegador executa todo o ciclo de Recálculo-Layout-Paint. Se sua aplicação faz dezenas ou centenas de manipulações diretas no DOM em uma única ação do usuário, esse ciclo de re-renderização forçada se repete, causando lentidão e queda de desempenho. A manipulação DOM direta e constante é ineficiente.
Compreendendo o Virtual DOM
O que o Virtual DOM faz é tentar minimizar todos estes estágios, atuando como um intermediário.
Podemos pensar nele como uma cópia local do DOM (uma espécie de espelho) mantida em memória (um objeto JavaScript). Dessa forma, ao invés de tocar o DOM Real diretamente, fazemos as alterações no Virtual DOM.
O React não vai modificar o DOM Real diretamente. Ele fará as seguintes etapas:
- Atualização do VDOM: O React atualiza seu DOM virtual, aplicando as novas mudanças de estado.
- Diffing (Comparação): O React compara o VDOM atual (o novo) com o VDOM anterior. Esse algoritmo encontra a diferença exata (o diff) entre os dois estados.
- Patching (Aplicação Otimizada): O algoritmo encontra o número mínimo de operações necessárias para que o DOM Real reflita apenas essa diferença.
A Magia da Sala Desarrumada
Imagine que sua casa é o DOM Real.
- Manipulação Direta (Lenta): Você desarruma a sala, e para corrigir, você derruba a casa inteira e a reconstrói. (Recalcula tudo).
- Virtual DOM (Rápida): Você desarruma a sala. O VDOM detecta que apenas a sala mudou. Ele envia uma única instrução para o DOM Real: “Mude apenas o conteúdo da Sala”.
Com isso, o navegador é forçado a fazer o caro ciclo de Layout e Paint apenas uma vez e apenas na área afetada, otimizando drasticamente o desempenho da aplicação.
Concluindo
O Virtual DOM é uma técnica e um conjunto de bibliotecas/algoritmos que permitem aos frameworks (como React e Vue) melhorar o desempenho do front-end. Eles evitam o trabalho direto e constante com o DOM, trabalhando em vez disso com um objeto de JavaScript que imita a árvore DOM, garantindo que o DOM Real só seja tocado quando for realmente necessário e apenas no mínimo essencial.
Obrigado por ler 🙂