Shadow DOM è veloce come Virtual DOM in React.js?

L’implementazione di Shadow DOM nei miei progetti li renderà più veloci come il DOM virtuale utilizzato da React?

DOM virtuale

Virtual DOM si occupa di evitare modifiche non necessarie al DOM, che sono costose in termini di prestazioni, poiché le modifiche al DOM solitamente causano il re-rendering della pagina. Virtual DOM consente anche di raccogliere più modifiche da applicare contemporaneamente, quindi non ogni singolo cambiamento causa un nuovo rendering, ma invece il re-rendering avviene solo una volta dopo che una serie di modifiche è stata applicata al DOM.

DOM ombra

Shadow dom riguarda principalmente l’incapsulamento dell’implementazione. Un singolo elemento personalizzato può implementare una logica più o meno complessa combinata con DOM più o meno complessi. Un’intera applicazione web di complessità arbitraria può essere aggiunta a una pagina tramite un’importazione e ma anche componenti più semplici riutilizzabili e componibili possono essere implementati come elementi personalizzati in cui la rappresentazione interna è nascosta nel DOM ombra come .

Incapsulamento dello stile Shadow DOM si occupa anche di impedire che gli stili vengano applicati in modo accidentale agli elementi che il progettista non intendeva, ad esempio perché il CSS o la libreria dei componenti che stai usando ha cambiato un selettore che ora si applica ad altri elementi che usano gli stessi nomi di classi CSS. Gli stili aggiunti ai componenti hanno un ambito per quel componente e viene impedito il dissanguamento o l’entrata di stili.

Shadow DOM e prestazioni

Anche se shadow DOM non riguarda le prestazioni, in primo luogo ha anche implicazioni sulle prestazioni. Poiché gli stili sono ambiti, il browser può fare ipotesi su alcune modifiche per influenzare solo un’area limitata della pagina (il DOM ombra di un elemento personalizzato) che può limitare il re-rendering all’area di tale componente, invece del re-rendering l’intera pagina.

Questo è il motivo per cui i combinatori >>> , /deep/ , e ::shadow CSS, che consentivano l’applicazione di stili attraverso i confini del DOM ombra, erano deprecati e sono soggetti a essere presto rimossi da Chrome (altri browser non li avevano mai AFAIK). La semplice esistenza di questi combinatori impedisce il tipo di ottimizzazione menzionato nel paragrafo precedente.

Angular2 utilizza i vantaggi di entrambi i mondi.

Utilizza il stream di dati unidirezionale e esegue il rilevamento delle modifiche solo sul modello. Se rileva le modifiche, fa sì che il DOM venga aggiornato aggiornando i bind e *ngFor direttive strutturali come *ngFor , *ngIf , … aggiorna il DOM. Pertanto, il DOM viene aggiornato solo quando il modello è effettivamente cambiato.

Angular2 utilizza shadow DOM (solo con ViewEncapsulation.Native che non è attualmente il valore predefinito) per utilizzare le funzionalità di incapsulamento dello stile fornite dal browser o (impostazione predefinita corrente) solo emulare l’incapsulamento dello stile riscrivendo gli stili aggiunti ai componenti, come soluzione alternativa fino a DOM ombra nativa e le variabili CSS (per cambiamenti di stile globali dinamici) diventano ampiamente disponibili.

No, Shadow DOM e Virtual DOM non sono correlati, sebbene abbiano un nome simile:

DOM virtuale: Reagisce il concetto di conservare due copie del DOM (l’originale e l’aggiornato) per motivi diversi. Prima del rendering, React diffsce i due oggetti per determinare se applicare un aggiornamento (s) all’albero DOM effettivo. Ciò si traduce in prestazioni potenziate, poiché stiamo solo aggiornando le parti della vista che lo richiedono, non l’intero schermo.

Shadow DOM: parte della specifica Web Components proposta dal W3C, che consente fondamentalmente l’incapsulamento di elementi DOM e di stili CSS più piccoli in un singolo elemento DOM:

Esempio di elemento DOM ombra

  

Tuttavia, realtà racchiude i seguenti elementi:

 
Play Pause

Quindi, usando Shadow DOM, siamo in grado di hide i dettagli di implementazione del nostro elemento web e di trasmettere solo le informazioni necessarie ai sottoelementi (cioè height , width ), che, forse in modo confuso, somigliano fortemente all’idioma di ReactJS di passaggio props di props per componenti.

Informazioni fornite tramite :

Da questo test, Polymer ha fatto saltare React in performance in Chrome:

https://jsperf.com/polymer-vs-react-update/6