A implementação do Shadow DOM em meus projetos os tornará mais rápidos como o DOM virtual usado pelo React?
Respostas:
DOM Virtual
O Virtual DOM evita alterações desnecessárias no DOM, que são caras em termos de desempenho, porque as alterações no DOM geralmente causam uma nova renderização da página. O Virtual DOM também permite coletar várias alterações a serem aplicadas de uma vez, portanto, nem todas as alterações causam uma nova renderização, mas, em vez disso, a nova renderização só acontece uma vez depois que um conjunto de mudanças foi aplicado ao DOM.
Shadow DOM
Shadow dom é principalmente sobre o encapsulamento da implementação. Um único elemento personalizado pode implementar uma lógica mais ou menos complexa combinada com um DOM mais ou menos complexo. Uma aplicação web inteira de complexidade arbitrária pode ser adicionada a uma página por uma importação e, <body><my-app></my-app>mas também componentes reutilizáveis e composíveis mais simples podem ser implementados como elementos personalizados onde a representação interna é escondida no DOM de sombra <date-picker></date-picker>.
O encapsulamento de estilos Shadow DOM também evita que estilos sejam aplicados acidentalmente a elementos que o designer não pretendia, por exemplo, porque o CSS ou a biblioteca de componentes que você está usando alterou um seletor que agora se aplica a outros elementos que usam os mesmos nomes de classe CSS. Os estilos adicionados aos componentes têm como escopo esse componente e o vazamento de estilos é evitado.
Shadow DOM e desempenho
Mesmo que o shadow DOM não seja sobre desempenho em primeiro lugar, ele também tem implicações de desempenho. Como os estilos têm escopo definido, o navegador pode fazer suposições sobre algumas alterações que afetam apenas uma área limitada da página (o DOM de sombra de um elemento personalizado), o que pode limitar a re-renderização para a área de tal componente, em vez de re-renderizar a página inteira.
Esta é a razão as >>>, /deep/e ::shadowcombinadores CSS, o que permitiu aplicar estilos para além das fronteiras DOM sombra, foram obsoleto e estão sujeitos a ser removido logo do Chrome (outros navegadores nunca tive-los AFAIK). A mera existência desses combinadores impede o tipo de otimização mencionado no parágrafo anterior.
Angular2 usa as vantagens dos dois mundos.
Ele usa o fluxo de dados unidirecional e executa a detecção de alterações apenas no modelo. Se ele detectar as mudanças que faz com que o DOM a ser atualizado por ligações de actualização e fazer directivas estruturais como *ngFor, *ngIf... atualizar o DOM. Portanto, o DOM só é atualizado quando o modelo é realmente alterado.
Angular2 usa shadow DOM (apenas com o ViewEncapsulation.Nativequal atualmente não é o padrão) para utilizar os recursos de encapsulamento de estilo fornecidos pelo navegador ou (padrão atual) apenas emular o encapsulamento de estilo reescrevendo estilos adicionados aos componentes, como uma solução alternativa até as variáveis CSS e DOM de sombra nativas (para mudanças dinâmicas de estilo global) tornam-se amplamente disponíveis.
Não, Shadow DOM e Virtual DOM não estão relacionados, embora tenham nomes semelhantes:
DOM Virtual: conceito React de manter duas cópias do DOM (o original e o atualizado) por motivos diferenciais. Antes da renderização, React diffs os dois objetos para determinar se deve aplicar uma atualização (ões) à árvore DOM real. Isso resulta em desempenho aprimorado, já que estamos apenas atualizando as partes da visualização que exigem isso, não a tela inteira.
Shadow DOM: parte da especificação dos componentes da Web proposta pelo W3C, que basicamente permite o encapsulamento de elementos DOM menores e estilos CSS em um único elemento DOM:
Exemplo de elemento Shadow DOM
<video width="300" height="150" />
No entanto, <video>na verdade , encapsula os seguintes elementos:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
Então, usando Shadow DOM, podemos ocultar os detalhes de implementação de nosso elemento da web e apenas passar as informações necessárias para os subelementos (ou seja height, width), que, talvez de maneira confusa, se assemelha muito ao idioma ReactJS de passagem propspara componentes .
As informações são fornecidas por :
<video>), mas não há expectativa de ganho de desempenho.