Qual a diferença entre DOM e Virtual DOM?

DOM é a representação dos compomentes na página. Você manipula o DOM a fim de manipular estes componentes (criar, recriar, alterar seu estado).

Virtual DOM é um framework para manipulação do DOM.

Como funciona o Virtual DOM

No React, uma cópia de todos os nodes do DOM são replicados em código JavaScript.

Ao invés de fazer alterações diretamente no DOM (que são lentas) elas são feitas no Virtual DOM (rápidas). E somente quando realmente necessário, essas alterações são repassadas para o DOM original.

Virtual DOM oferece três recursos:

1) Uma representação do DOM real na linguagem JavaScript. O DOM real é então gerado a partir desta representação.
2) Computação das diferenças entre o DOM real e a sua representação.
3) Aplicação de patch para atualizar o DOM real conforme o novo estado da sua representação.

Deste modo, utilizando Virtual DOM você:

1) Cria uma representação do DOM na linguagem do Virtual DOM;
2) Manda o Virtual DOM gerar o DOM real;
3) Quando houver alteração no model, em vez de atualizar a DOM real você simplesmente manda regerar toda a representação Virtual DOM passando o novo estado do model como parâmetro;
4) Então você usa o mecanismo de comparação para obter as diferenças entre a representação do Virtual DOM e o DOM real;
5) E usa o mecanismo de patch que vai atualizar o DOM real conforme as diferenças observadas.

Por que Virtual DOM é mais rápido?

Não necessariamente é mais rápido. Ele pode ser mais rápido se o teu código para verificar e manipular o DOM não for tão eficiente quanto o código dele.

Qual a vantagem e desvantagem em cada um?

Como DOM e Virtual DOM são duas coisas distintas, não há como compará-los.

O que pode ser comparado é o Virtual DOM com outro mecanismo para manipular o DOM (JavaScript puro, JQuery ou outros frameworks como BackboneJS e AngularJS).

Abordagem permite a API declarativa do React

Você diz ao React qual o state que você quer que a interface do usuário esteja, e ele garante que o DOM seja igual ao state. Isso abstrai a manipulação de atributos, manipulação de eventos e atualização manual do DOM que, caso ao contrário, você teria que usar para construir o seu app.

No React, sua propaganda é que o Virtual DOM possui uma vantagem principal que é a organização do código, que o deixa mais significativo, e a capacidade que ele te oferece de se focar em outras coisas que não a manipulação do DOM.

Compartilhe

Sobre o autor

James R. Moro

James Moro

Iniciei minha vida profissional como desenvolvedor web em 2008. Tenho um canal no Youtube onde publico vídeos sobre tecnologia.

Faça um comentário