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

Question

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

Answer 1

Virtuelle DOM

Virtuelle DOM ist über unnötige Änderungen an der DOM zu vermeiden, die teuer perfo sind rmance-weise, da Änderungen am DOM normalerweise zum erneuten Rendern der Seite führen. Virtual DOM ermöglicht es auch, mehrere Änderungen gleichzeitig zu übernehmen, sodass nicht jede einzelne Änderung zu einem erneuten Rendern führt. Stattdessen wird das erneute Rendern nur einmal ausgeführt, nachdem eine Reihe von Änderungen auf das DOM angewendet wurde.

Schatten DOM

Schatten dom ist vor allem über Einkapselung der Umsetzung. Ein einzelnes benutzerdefiniertes Element kann mehr oder weniger komplexe Logik in Kombination mit mehr oder weniger komplexem DOM implementieren. Eine vollständige Webanwendung beliebiger Komplexität kann durch einen Import zu einer Seite hinzugefügt werden, und auch einfachere wiederverwendbare und zusammensetzbare Komponenten können als benutzerdefinierte Elemente implementiert werden, wobei die interne Darstellung im Schatten-DOM wie <date-picker></date-picker> verborgen ist.

Stil Verkapselung Schatten DOM ist auch über das Verhindern Arten zufällig auf Elemente angewendet wird der Designer nicht zum Beispiel, die Absicht hatte, weil die CSS oder Komponenten-Bibliothek Sie einen Selektor geändert verwenden, die auf andere Elemente gilt nun, dass Verwenden Sie die gleichen CSS-Klassennamen.Styles, die zu Komponenten hinzugefügt werden, sind auf diese Komponente beschränkt und das Ausbluten oder das Ausblenden von Stilen wird verhindert.

Schatten DOM und Leistung

Obwohl Schatten DOM nicht über die Leistung in erster Linie ist es auch Auswirkungen auf die Leistung hat. Da Stile im Bereich liegen, kann der Browser Annahmen über einige Änderungen treffen, die nur einen begrenzten Bereich der Seite betreffen (das Schatten-DOM eines benutzerdefinierten Elements), der das erneute Rendern auf den Bereich einer solchen Komponente beschränken kann, anstatt erneut zu rendern die ganze Seite.

Dies ist der Grund, warum die >>>, /deep/ und ::shadow CSS Kombinatoren, die Stile über Schatten DOM Grenzen anwenden dürfen, wurden als veraltet und unterliegen bald von Chrome entfernt werden (andere Browser sie nie AFAIK hatte). Die bloße Existenz dieser Kombinatoren verhindert die Art von Optimierung, die im vorherigen Absatz erwähnt wurde.

Angular2 nutzt die Vorteile beider Welten.

Es verwendet einen unidirektionalen Datenfluss und führt Änderungserkennung nur für das Modell aus. Wenn Änderungen erkannt werden, wird das DOM aktualisiert, indem Bindings aktualisiert und strukturelle Anweisungen wie *ngFor, *ngIf, ... das DOM aktualisiert werden. Daher wird das DOM nur aktualisiert, wenn sich das Modell tatsächlich geändert hat.

Angular2 verwendet Schatten DOM (nur mit ViewEncapsulation.Native das ist momentan nicht der Standard) Stil Einkapselung Funktionen durch den Browser oder (aktuelle Standard) nur emulieren Stil Verkapselung vorgesehen zu verwenden, von Arten hinzugefügt, um Komponenten, wie dieses Problem zu umgehen, bis nativer Umschreiben Schatten-DOM- und CSS-Variablen (für dynamische globale Stiländerungen) werden allgemein verfügbar.

Answer 2

Nein, Schatten DOM und virtuelle DOM sind nicht verwandt, wenn auch etwas ähnlich genannt:

Virtuelle DOM: Konzept Reagieren zwei Kopien des DOM zu halten (das Original, und die aktualisierte) für Differential Gründen. Vor dem Rendern verteilt React die beiden Objekte, um festzustellen, ob sie ein Update auf die aktuelle DOM-Struktur anwenden sollen. Dies führt zu einer erhöhten Leistung, da wir nur die Teile der Ansicht aktualisieren, die dies erfordern, nicht den gesamten Bildschirm.

Schatten DOM: Teil der Web Components spec wie durch W3C vorgeschlagen, die im Grunde die Verkapselung von kleineren DOM-Elementen und CSS-Stilen in ein einziges DOM-Element ermöglicht:

Beispiel Schatten-DOM-Element

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

jedoch kapselt <video> 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> 

Durch die Verwendung von Shadow DOM können wir die Implementierungsdetails unseres Webelements verbergen und nur notwendige Informationen an die Unterelemente weiterleiten (d. H. height, width), die, vielleicht zum Verwechseln ähnlich, stark dem Reaction-Idiom der Weitergabe von props an Komponenten ähnelt.

Informationen über bereitgestellt:

• http://www.funnyant.com/reactjs-what-is-it/
• http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Answer 3

Aus diesem Test blies Polymer in der Leistung in Chrome Reaktion entfernt:

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