L'implementazione di Shadow DOM nei miei progetti li renderà più veloci come il DOM virtuale utilizzato da React?
Risposte:
DOM virtuale
Il DOM virtuale consiste nell'evitare modifiche non necessarie al DOM, che sono costose in termini di prestazioni, poiché le modifiche al DOM di solito causano il rendering della pagina. Il DOM virtuale consente anche di raccogliere più modifiche da applicare contemporaneamente, quindi non ogni singola modifica causa un nuovo rendering, ma il nuovo rendering avviene solo una volta dopo che una serie di modifiche è stata applicata al DOM.
Shadow DOM
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 mediante un'importazione e <body><my-app></my-app>anche componenti più semplici riutilizzabili e componibili possono essere implementati come elementi personalizzati in cui la rappresentazione interna è nascosta nello shadow DOM come <date-picker></date-picker>.
Incapsulamento degli stili Shadow DOM serve anche a impedire che gli stili vengano applicati accidentalmente a elementi che il designer non intendeva, ad esempio perché il CSS o la libreria di componenti che stai utilizzando ha modificato un selettore che ora si applica ad altri elementi che utilizzano gli stessi nomi di classi CSS. Gli stili aggiunti ai componenti sono limitati a quel componente e viene impedito il sanguinamento in uscita o in entrata degli stili.
Shadow DOM e prestazioni
Anche se shadow DOM non riguarda le prestazioni in primo luogo, ha anche implicazioni sulle prestazioni. Poiché gli stili hanno un ambito, 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 ri-rendering all'area di tale componente, invece di ripetere il rendering l'intera pagina.
Questa è la ragione delle >>>, /deep/e ::shadowcombinatori CSS, che ha permesso di applicare stili attraverso i confini dell'ombra DOM, sono stati deprecati e sono soggette a essere rimosso subito da Chrome (altri browser non hanno mai avuto loro per quanto ne so). La sola esistenza di questi combinatori impedisce il tipo di ottimizzazione menzionato nel paragrafo precedente.
Angular2 utilizza i vantaggi di entrambi i mondi.
Utilizza un flusso di dati unidirezionale ed esegue il rilevamento delle modifiche solo sul modello. Se rileva cambia provoca il DOM per essere aggiornato da attacchi di aggiornamento e rendono direttive strutturali come *ngFor, *ngIf... aggiornare il DOM. Pertanto il DOM viene aggiornato solo quando il modello è effettivamente cambiato.
Angular2 utilizza shadow DOM (solo con il ViewEncapsulation.Nativequale attualmente non è l'impostazione predefinita) per utilizzare le funzionalità di incapsulamento dello stile fornite dal browser, oppure (impostazione predefinita corrente) emula semplicemente l'incapsulamento dello stile riscrivendo gli stili aggiunti ai componenti, come soluzione alternativa fino a quando il DOM shadow nativo e le variabili CSS (per cambiamenti di stile globali dinamici) diventano ampiamente disponibili.
No, Shadow DOM e Virtual DOM non sono correlati, sebbene con nomi in qualche modo simili:
DOM virtuale: React concetto di mantenere due copie del DOM (l'originale e l'aggiornamento) per ragioni differenti. Prima del rendering, React differenzia i due oggetti per determinare se applicare uno o più aggiornamenti all'albero DOM effettivo. Ciò si traduce in prestazioni migliorate, poiché stiamo aggiornando solo le parti della visualizzazione che lo richiedono, non l'intero schermo.
Shadow DOM: parte delle specifiche dei componenti Web come proposto dal W3C, che sostanzialmente consente l'incapsulamento di elementi DOM più piccoli e stili CSS in un singolo elemento DOM:
Esempio di elemento Shadow DOM
<video width="300" height="150" />
Tuttavia, <video>incapsula effettivamente 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 Ombra DOM, siamo in grado di nascondere i dettagli di implementazione di nostro elemento web, e solo passare insieme le informazioni necessarie per i sub-elementi (ad esempio height, width), che, forse confusamente, assomiglia fortemente i ReactJS idioma del passaggio propsai componenti .
Informazioni fornite tramite :
<video>), ma non ci si aspetta un aumento delle prestazioni.