0

HTML DOM vs Virtual DOM

Thiago Silva
Thiago Silva

Boa tarde amigos devs, venho falar um pouco sobre a diferença do HTML DOM e Virtual DOM do ReactJS.


Cada página da web é representada internamente como uma árvore de objetos. Essa representação é chamada de Document Object Model. Além disso, é uma interface neutra em termos de linguagem que permite que linguagens de programação (como JavaScript) acessem os elementos HTML.

 

Em outras palavras, o HTML DOM é um padrão de como obter, alterar, adicionar ou excluir elementos HTML. No entanto, essas operações DOM são extremamente caras.

 

Virtual DOM é uma solução

A equipe do React teve a ideia de abstrair o HTML DOM e criar seu próprio Virtual DOM para calcular o número mínimo de operações que precisamos aplicar no HTML DOM para replicar o estado atual de nosso aplicativo.

 

O Virtual DOM economiza tempo com modificações desnecessárias do DOM, pois as operações aplicadas no Virtual DOM são baratas, porque o Virtual DOM é um objeto JavaScript.

 

Como exatamente?

 

Em cada ponto do tempo, o React tem o estado do aplicativo representado como um DOM Virtual. Sempre que o estado do aplicativo muda, essas são as etapas que o React executa para otimizar o desempenho:

 

1. Gera um novo DOM Virtual que representa o novo estado de nosso aplicativo;

 

2. Compare o antigo Virtual DOM (que representa o HTML DOM atual) com o novo Virtual DOM;


3. Com base na 2ª etapa, encontre o número mínimo de operações para transformar o antigo DOM Virtual (que representa o DOM HTML atual) no novo DOM Virtual;

 

4. Depois que essas operações são encontradas, elas são mapeadas em suas operações HTML DOM equivalentes;

 

5. Agora, o número mínimo de operações que foram encontradas e transferidas para suas operações HTML DOM equivalentes agora são aplicadas diretamente no HTML DOM do aplicativo, o que economiza tempo com a modificação desnecessária do HTML DOM.

0
0

Comentários (0)

Thiago Silva é um apaixonado por tecnologia e autodidata.

Brasil