O que é DOM, Virtual DOM e Shadow DOM?

Olá Web Developers! Vamos entender de forma simplificada o que é o DOM e qual a diferença entre ele e os tão falados Virtual DOM e Shadow DOM.

O que é o DOM?

DOM significa Document Object Model (Modelo de Objeto de Documento). Ele é uma API que nos permite acessar e manipular documentos HTML e XML válidos.

Vamos usar o seguinte código como exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Minha Página</title>
    </head>
    <body>
        <h1>Olá Web Developers!</h1>
        <p>E mais um texto aqui</p>
    <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"NRJS-e7d61b56663ee7a3078","applicationID":"463033615","transactionName":"Y1FWYRZZV0NTUhUIXlobYUcNF05AHUYRTFBQWV1bS0hWQ0YfEQlB","queueTime":0,"applicationTime":871,"atts":"TxZVF15DRE0=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>

Ele pode ser representado pela seguinte estrutura em árvores de nós (Node Tree):

Mesmo que se pareça muito com nosso código, o DOM não é exatamente igual a ele. Quando o HTML não é válido, os navegadores tentam arrumá-lo, gerando um DOM um pouco diferente. O DOM também não é exatamente o que vemos nas DevTools. Um exemplo são os pseudo-elementos criados com CSS. Não podemos acessá-los com JavaScript porque não fazem parte do DOM.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

O que é Shadow DOM?

O Shadow DOM é uma tecnologia do navegador projetada para podermos criar componentes que contém uma aparência e comportamento sem influenciar os demais elementos a sua volta, escondendo sua estrutura.

Um exemplo bem simples: se você trabalha com HTML, provavelmente já viu a tag <video>, certo? Criei um arquivo apenas com esta tag. Mas ao mandar o navegador exibir o Shadow DOM, veja o que aparece:

Esta é toda a estrutura escondida dentro da tag <video>. Note que há várias <div>. Deixei selecionado no código um elemento, que é a barra de progresso do vídeo. Veja que ela é feita por um <input> do tipo range. E há vários outros elementos responsáveis pela estrutura e funcionamento da tag <vídeo>.

E não precisamos saber do que o elemento de reproduzir os vídeos é feito, como ele funciona ou como é estilizado. O Shadow DOM nos permite criar elementos assim, que possuem estrutura, estilo e comportamento encapsulados. Então o JavaScript e CSS de um componente não corre o risco de afetar outro componente. Basicamente essa é a diferença com o DOM comum: encapsulamento.

O que é Virtual DOM?

Quando estamos desenvolvendo aplicações com HTML, é por meio do DOM que podemos manipular os elementos presentes nele. Porém, cada acesso ao DOM leva um pequeno tempo, e cada alteração obriga o navegador a renderizar novamente a parte da tela afetada. Então se tivermos muitas coisas para atualizar, nossa aplicação terá problemas de perfomance.

É aí que entra o Virtual DOM (VDOM). Ele é uma representação do DOM mantida em memória. Assim, quando precisamos fazer alguma alteração, ela é feita no Virtual DOM, que é bem mais rápido que o DOM. Com isso ele analisa todos os lugares que serão afetados e sincroniza com o DOM em um processo chamado Reconciliação. A vantagem disso é que essa análise permite que haja o menor número possível de acessos ao DOM, melhorando muito a performance das aplicações.

Lembrando que o Virtual DOM não é algo do navegador, e sim, um conceito implementado por bibliotecas como o React.

Por ser algo feito em memória, e não algo preso ao DOM criado pelo navegador, o Virtual DOM também permite que a gente crie páginas no servidor. Hoje em dia é comum que algumas aplicações renderizem a tela inicial no servidor para enviar um HTML pronto com os dados ao usuário, passando a impressão de que tudo já foi carregado, para só então carregar o resto da aplicação. Isso pode ser feito utilizando bibliotecas e frameworks como Angular, React e Vue. Um caso bem famoso que utiliza esta técnica é a Netflix.

Desenvolvedor React Sênior
Formação: Desenvolvedor React Sênior
Nesta formação conheceremos a Arquitetura Flux, muito utilizada nas aplicações modernas e que nos trás muitos benefícios em relação às arquiteturas clássicas como o MVC. Aprenderemos a sua principal implementação, o Redux. Também veremos a trabalhar com código assíncrono com Redux Thunk e conceito de programação funcional com Redux-Saga.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200