14

Analisando criteriosamente visando uma melhor performarce de uma aplicação, quais os principais benefícios em usar um ou outro e suas diferenças? O Angular por exemplo trabalha com a abordagem do Shadow DOM, já o React com Virtual DOM, devo considerar isso ao escolher o framework ou a lib?

6
  • Relacionada: Qual a diferença entre dom e virtual dom 16/04/2019 às 14:50
  • @DenisRudneideSouza Gostaria de uma resposta mais especifica com relação ao Shadow DOM efetivamente, saberia me ajudar? 16/04/2019 às 14:51
  • 1
    É mais como complemento mesmo 16/04/2019 às 14:52
  • 2
    Shadow DOM e Virtual DOM não tem relação. Um framework pode utilizar ambos ou nenhum. O Shadow DOM é um encapsulamento da árvore de nodos, enquanto o Virtual DOM é uma abstração do DOM para que o DOM seja manipulado de maneira eficiente. Dá pra criar uma resposta com as vantagens de cada um, mas não dá pra comparar um "contra" o outro. 16/04/2019 às 14:54
  • 2
    O que é Shadow DOM?
    – Woss
    17/04/2019 às 11:06

2 Respostas 2

5
+50

Primeiro e muito importante, vamos entender o DOM:

DOM (Document Object Model)

É o modelo de objetos usados num documento Web, ou por assim dizer, uma página Web. Ele define como é modelagem dos objetos que compõe a página, coisas por exemplo que a raiz do documento é o <html>, que tem como filhos por exemplo <head> e <body>, que dentro do <body> usamos elementos como <p> e <div>, que a tag <td> deve estar aninhada e ser filha de uma tag <tr>, que por sua vez é filha de uma tag <table>, e assim por diante.

Entendendo isso, vejamos o Virtual e Shadow DOM.

Virtual DOM

É uma cópia ou clone do próprio DOM, ou de uma maneira simples, uma cópia dos objetos da página. Seu propósito é bem simples: melhorar a performance na manipulação do DOM.
Talvez não tenha se dado conta, mas uma página com muitos elementos no DOM pode ficar fisicamente grande, e tem um detalhe crucial quando se fala em performance: alterações no DOM podem fazer com que toda a página seja renderizada, e alguns processos feitos pelo Javascript podem bloquear a atualização da página. Isso quer dizer que, um simples mudar de cor ou algo mais "pesado" como esconder um div que obriga a reposicionar os div adjacentes pode demandar bastante processamento e tempo.

É aqui que entra o Virtual DOM: seu principal objeto é fazer todas as alterações neste "espelho" do DOM real e aplicar tudo de uma vez, ganhando assim em performance. Desta forma, pode-se atualizar de uma única vez tudo que é necessário de forma otimizada.

Shadow DOM

Está relacionado ao conceito de encapsulamento dos componentes Web. Seu foco principal diferente do Virtual DOM não é performance relacionada a mudanças no DOM, mas deixar o código mais legível, transparente e fácil de entender. Por exemplo: sabia que a tag <input> é formada internamente por elementos <div>?

A imagem a seguir mostra isso (habilitei a visualização do Shadow DOM no Dev Tools do Chrome), note o node #shadow-root:

inserir a descrição da imagem aqui

Veja que, no lugar de criar um dois divs para posicionar onde vai ser digitado o conteúdo, fica mais simples e transparente usar uma tag chamada <input>.

Alguns Frameworks se utilizam bastante desse conceito de componentização, como o Angular, onde isso é feito através de diretivas.

Agora é claro entender a diferença entre ambos e qual o propósito principal de cada um. Sobre a pergunta, a manipulação do Virtual DOM é claramente mais focado em performance, e o Shadow DOM na simplificação da leitura do documento e na sua semântica.

Um coisa importante a se notar é que o Virtual DOM precisa ser implementado, criado com seu próprio código se não usar algum Framework que já o utilize, enquanto que o Shadow DOM já é implementado pelos navegadores, aqui pode ver um exemplo de código de como criar um pseudo-elemento: Using Shadow DOM

Aqui alguns links de fontes onde busquei informações e também alguns para referência:

  • Referência do DOM: DOM Reference
  • Referência do Shadow DOM: Using Shadow DOM
  • Shadow DOM compatibilidade: CanIUse?
  • Benchmarks on line (DOM, Virtual DOM e outros), compara a performance de renderização/alteração dos documento: uibench
10
  • Muito boa resposta cara! parabéns 17/07/2019 às 16:57
  • obrigado @EduardoVargas, tentei descrever o melhor que pude e deixar boas referências 17/07/2019 às 21:37
  • 1
    De uma forma geral seria isso @VictorCarnaval, costumam ser chamados de web componets, que encapsulam estruturas mais complexas de html... uma estrutra inteira como <ul><li>.. poderíamos nomear de <menu-principal> por exemplo, mas que seriam renderizados pelo navegador com toda a estrutura. 18/07/2019 às 12:56
  • 1
    Agora imagine uma chamada ajax que retonar um json com um array de 50 elementos, e você quer adicionar isso numa lista ul por exemplo dependendo do posicionamento, pode ser que a cada item adicionado no DOM, o motor do navegador tenha de recompor a tela, e ainda pode geral um block, fazendo um desagradável efeito de "travar" enquanto atualiza várias vezes para cada um dos 50 itens. 18/07/2019 às 16:24
  • 1
    Agora se fizer isso tudo no Virtual DOM esse efeito não vai ser percebido pelo usuário, e uma vez feito o trabalho, o Virtual DOM pode atualizar integralmente todo o DOM, sendo mais rápido, causando uma única atualização e melhorando a experiencia do usuário. 18/07/2019 às 16:24
1

Primeiro vamos começao com o SHADOW DOM que é utilizado pelo angular e webcomponents

O shadow dom nada mais é que o método que o angular e a api de webComponents usa para encapsular estilos de componentes basicamente quando vc usa ViewEncapsulation.Native em um componente do angular fica fácil de visualizar isso, basicamente pra cada componente ele gera um hash e usa esse hash como seletor de html assim evitando conflitos com outros componentes.

VirtualDom usado pelo react.

O virtual dom do react nada mais é que uma implementação mais lightweight e otimizada para o react do dom. Quando vc seleciona uma div nativa por exemplo ela tem varias propriedades que para o react não são necessárias por exemplo. Com isso quando vc cria uma div na verdade vc esta criando uma React.Div com menos coisas. Outra vantagem é que o react compara essas arvores de virtual dom para saber o que atualizar e ser mais eficiente.

Conclusão

Então realizando uma conclusão aqui acho díficl comparar os dois pois servem propósitos diferentes sendo até possível que um framework no futuro use os dois como tem boatos do angular indo para uma solução de virtual dom como o react e isso não impediria dele continuar usando shadow dom.

Resumindo o primeiro serve para encapsular estilos em componentes e o ultimo é relacionado a performance de renderização

4
  • Teria como focar mais a resposta nas diferenças entre elas e o que deve ser considerado na escolha da biblioteca? As definições de cada um independentes já foram respondidas em Qual é a diferença entre DOM e virtual DOM? e O que é shadow DOM?
    – Woss
    12/07/2019 às 18:45
  • Oi woss então cara acho díficil responder comparando os dois pois eles servem propósitos diferentes, tirando o nome dom os dois não tem muito em comum. O primeiro serve para encapsular estilos em componentes e o ultimo é relacionado a performance principalmete do react. Pra mim é como comporar maçãs a laranjas 12/07/2019 às 18:47
  • E ambos são frutas, da mesma forma que ambos trabalham com DOM :D A pergunta pede qual a diferença entre usar um ou outro, e se não são exclusivos daria para completar colocando como seria utilizando ambos.
    – Woss
    12/07/2019 às 18:48
  • Editei tentando meu melhor. Se não for isso espera outra resposta hahahahaha 12/07/2019 às 18:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .