46
L'implementazione di Shadow DOM nei miei progetti li renderà più veloci come il DOM virtuale utilizzato da React?Il DOM dell'ombra è veloce come il DOM virtuale in React.js?
A
risposta
67
DOM virtuale
DOM virtuale è di evitare i cambiamenti necessari al DOM, che sono costosi perfo in teoria, perché 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.
Ombra DOM
ombra dom è principalmente circa l'incapsulamento della realizzazione. 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 <body><my-app></my-app> ma anche componenti più semplici riutilizzabili e componibili possono essere implementati come elementi personalizzati in cui la rappresentazione interna è nascosta nel DOM ombra come <date-picker></date-picker>.
Stile incapsulamento Ombra DOM è anche su come prevenire stili applicati accidentalmente agli elementi il progettista non aveva l'intenzione di, ad esempio perché la libreria CSS o componenti che si sta utilizzando cambiato un selettore che ora si applica ad altri elementi che usa gli stessi nomi di classe CSS.Gli stili aggiunti ai componenti hanno un ambito per quel componente e viene impedito il dissanguamento o l'entrata di stili.
ombra DOM e performance
Anche se ombra 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.
Questa è la ragione per le >>>, /deep/, e ::shadow combinatori CSS, che ha permesso di applicare stili attraverso i confini dell'ombra DOM, sono stati deprecati e sono soggetti a essere rimosso subito da Chrome (altri browser non li aveva mai quanto ne so). 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 flusso 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 ed esegua direttive strutturali come *ngFor, *ngIf, ... aggiorna il DOM. Pertanto, il DOM viene aggiornato solo quando il modello è effettivamente cambiato.
Angular2 utilizza DOM ombra (solo con ViewEncapsulation.Native, che non è al momento l'impostazione predefinita) per utilizzare le funzionalità di incapsulamento stile forniti dal browser, o (di default corrente) solo emulare lo stile di incapsulamento riscrivendo stili aggiunti ai componenti, come una soluzione fino nativo le variabili shadow DOM e CSS (per cambiamenti di stile globali dinamici) diventano ampiamente disponibili.
43
No, Ombra DOM e DOM virtuali sono estranei, anche se un po nome simile:
DOM virtuale: Reagire concetto di mantenere due copie del DOM (l'originale, e l'aggiornamento) per motivi differenziali. 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.
ombra DOM: Parte della Web Components spec come proposto dal W3C, che permette in sostanza l'incapsulamento di elementi DOM piccole e stili CSS in un unico elemento DOM:
Esempio ombra DOM Element
<video width="300" height="150" />
Tuttavia, <video> in realtà racchiude i seguenti elementi:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
Quindi, utilizzando Shadow DOM, siamo in grado di nascondere i dettagli di implementazione del nostro elemento Web e di trasmettere solo le informazioni necessarie ai sottoelementi (ad es. height, width), che, forse in modo confuso, assomiglia molto all'idioma ReactJS di passare props ai componenti.
Informazioni fornite tramite:
+0
Vuoi dire che la prestazione di Ombra DOM è come DOM, ma è solo incapsulato? –
+1
@Hmoo_oomH La mia comprensione è che Shadow DOM è più utile per la leggibilità - poiché stiamo nascondendo i dettagli di implementazione di elementi web complessi dietro un elemento di ordine superiore (ad esempio '
+1
Grazie, l'hai appena chiarito. –
0
Da questo test, Polymer soffiò Reagire lontano in termini di prestazioni in Chrome:
+1
Questa pagina genera un errore. Uncaught ReferenceError: Polymer non definito. messaggio: Uncaught ReferenceError: Polymer non definito fileName: https://jsperf.com/polymer-vs-react-update/6 lineNumber: 397 – Grumpy
+0
Cambierò le importazioni. Ecco un'altra misurazione delle prestazioni per Polymer vs Angular 2 https://vaadin.com/blog/-/blogs/simplifying-performance-with-web-components – dman
+0
questo sito utilizza una versione molto vecchia di reagire –
... e DOM non è lento. Sei. https://korynunn.wordpress.com/2013/03/19/the-dom-isnt-slow-you-are/ –