Ist Shadow DOM schnell wie Virtual DOM in React.js?

85

Werden sie durch die Implementierung von Shadow DOM in meinen Projekten schneller als das von React verwendete virtuelle DOM?

dom web-component shadow-dom virtual-dom Hmoo_oomH
quelle

Antworten:

122

Virtuelles DOM

Bei Virtual DOM geht es darum, unnötige Änderungen am DOM zu vermeiden, die in Bezug auf die Leistung teuer sind, da Änderungen am DOM normalerweise zu einem erneuten Rendern der Seite führen. Mit Virtual DOM können auch mehrere Änderungen erfasst werden, die gleichzeitig angewendet werden sollen. Daher führt nicht jede einzelne Änderung zu einem erneuten Rendern. Stattdessen erfolgt das erneute Rendern nur einmal, nachdem eine Reihe von Änderungen auf das DOM angewendet wurde.

Schatten DOM

Bei Shadow Dom geht es hauptsächlich um die Kapselung der Implementierung. Ein einzelnes benutzerdefiniertes Element kann mehr oder weniger komplexe Logik in Kombination mit mehr oder weniger komplexem DOM implementieren. Eine gesamte Webanwendung beliebiger Komplexität kann durch einen Import zu einer Seite hinzugefügt werden, <body><my-app></my-app>aber auch einfachere wiederverwendbare und zusammensetzbare Komponenten können als benutzerdefinierte Elemente implementiert werden, bei denen die interne Darstellung wie im Schatten-DOM verborgen ist <date-picker></date-picker>.

Stilkapselung In Shadow DOM wird auch verhindert, dass Stile versehentlich auf Elemente angewendet werden, die der Designer nicht beabsichtigt hat, z. B. weil die von Ihnen verwendete CSS- oder Komponentenbibliothek einen Selektor geändert hat, der jetzt für andere Elemente gilt, die dieselben CSS-Klassennamen verwenden. Zu Komponenten hinzugefügte Stile sind auf diese Komponente beschränkt, und das Ausbluten oder Einblenden von Stilen wird verhindert.

Shadow DOM und Leistung

Auch wenn es bei Shadow DOM nicht in erster Linie um Leistung geht, hat dies auch Auswirkungen auf die Leistung. Da Stile einen Gültigkeitsbereich haben, kann der Browser Annahmen über einige Änderungen treffen, die nur einen begrenzten Bereich der Seite betreffen (das Schatten-DOM eines benutzerdefinierten Elements), wodurch das erneute Rendern auf den Bereich einer solchen Komponente beschränkt werden kann, anstatt erneut gerendert zu werden die gesamte Seite.

Dies ist der Grund >>>, warum die Kombinatoren ,, /deep/und ::shadowCSS, mit denen Stile über Schatten-DOM-Grenzen hinweg angewendet werden konnten, veraltet waren und bald aus Chrome entfernt werden müssen (andere Browser hatten sie nie AFAIK). Die bloße Existenz dieser Kombinatoren verhindert die im vorherigen Absatz erwähnte Art der Optimierung.

Angular2 nutzt die Vorteile beider Welten.

Es verwendet einen unidirektionalen Datenfluss und führt die Änderungserkennung nur für das Modell aus. Wenn es erkennt , ändert er das DOM verursacht durch Aktualisierung Bindungen aktualisiert werden und machen strukturelle Richtlinien wie *ngFor, *ngIf... das DOM aktualisieren. Daher wird das DOM nur aktualisiert, wenn sich das Modell tatsächlich geändert hat.

Angular2 verwendet das Schatten-DOM (nur mit ViewEncapsulation.Nativedem derzeit nicht die Standardeinstellung ist), um die vom Browser bereitgestellten Stilkapselungsfunktionen zu verwenden , oder (die aktuelle Standardeinstellung) emuliert nur die Stilkapselung, indem Stile, die Komponenten hinzugefügt wurden, umgeschrieben werden, um die nativen Schatten-DOM- und CSS-Variablen zu umgehen (für dynamische globale Stiländerungen) werden allgemein verfügbar.

Günter Zöchbauer
quelle
7
... und DOM ist nicht langsam. Du bist. korynunn.wordpress.com/2013/03/19/the-dom-isnt-slow-you-are
Mattia Astorino
70

Nein, Shadow DOM und Virtual DOM haben nichts miteinander zu tun, obwohl sie einen ähnlichen Namen haben:

Virtuelles DOM: Reagieren Sie aus unterschiedlichen Gründen auf das Konzept, zwei Kopien des DOM (das Original und das aktualisierte) aufzubewahren. Vor dem Rendern unterscheidet React die beiden Objekte, um zu bestimmen, ob ein Update auf den tatsächlichen DOM-Baum angewendet werden soll. Dies führt zu einer Leistungssteigerung, da nur die Teile der Ansicht aktualisiert werden, für die dies erforderlich ist, nicht der gesamte Bildschirm.

Shadow DOM: Teil der von W3C vorgeschlagenen Web Components-Spezifikation , die im Grunde die Kapselung kleinerer DOM-Elemente und CSS-Stile in ein einziges DOM-Element ermöglicht:

Beispiel für ein Schatten-DOM-Element

<video width="300" height="150" />

<video>Verkapselt jedoch tatsächlich die folgenden Elemente:

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

Also von Shadow DOM verwenden, sind wir in der Lage , die Details der Implementierung unserer Web - Element zu verbergen, und übergeben Sie nur entlang erforderlichen Informationen über die Teilelemente (dh height, width), die vielleicht zum Verwechseln ähnelt stark der ReactJS Idiom vorbei propsan Komponenten .

Informationen bereitgestellt über :

Lux
quelle
Meinen Sie damit, dass die Leistung von Shadow DOM der von DOM entspricht, aber nur gekapselt ist?
Hmoo_oomH
3
@Hmoo_oomH Mein Verständnis ist, dass Shadow DOM eher der Lesbarkeit dient - da wir die Implementierungsdetails komplexer Webelemente hinter einem Element höherer Ordnung (z. B. <video>) verbergen , aber keine Leistungssteigerung zu erwarten ist.
Lux