It’s #FrontendFriday – DOM vs Virtual DOM vs Shadow DOM

Hallo Liebe FrontendFriday Leser.

Um euch am Anfang maximal zu verwirren, gleich mal eine schöne Einstiegsfrage:

Was ist der Unterschied zwischen DOM und HTML DOM?

Es grenzt an Haarspalterei, aber es gibt tatsächlich einen Unterschied. DOM allein stehend ist ein W3C-Standard, welcher definiert, wie auf ein Dokument zugegriffen werden kann. Der W3C-DOM-Standard wird mit Core DOM (für alle Dokumententypen), XML DOM und HTML-DOM in drei Teile aufgeteilt. Das HTML DOM ist somit das Objektmodell und die Schnittstelle für das HTML, welches jedes HTML-Element als Objekt mit allen Eigenschaften, Methoden und Ereignissen definiert. Somit ist das HTML DOM der Standard, um HTML-Elemente zu ändern, hinzuzufügen oder zu löschen. Im folgenden Beitrag wird stellvertretend für den HTML DOM der DOM ausdruck verwendet.

Was ist DOM?

Wenn eine Webseite geladen wurde, erzeugt der Webbrowser das hierarchische Dokument Object Model (eine Baumstruktur) von der Seite. Über dieses Modell wird der JavaScript Zugriff auf alle HTML-Elemente, HTML-Attribute und CSS-Styles einer Webseite ermöglicht. Die Anwendung des DOM mit JavaScript wird im IT-Fachjargon als DOM-Scripting bezeichnet. In der folgenden Abbildung wird ein DOM-Baum mit Objekten schematisch dargestellt.

Wie in der Abbildung dargestellt, ist das document-Objekt das oberste Element der Hierarchie und stellt praktisch die komplette Webseite dar. Das Arbeiten mit dem DOM ist jedoch rechenintensiv, denn nach jeder Änderung über das document-Objekt muss die gesamte Baumstruktur neu gerändert werden. Dies ist der Standardimplementierung geschuldet, welche im Prinzip keinen Vergleich zwischen dem veränderten Inhalten vornehmen kann.

Was ist Virtual DOM?

Das Virtual DOM ist eine JSON Repräsentation, eine Kopie des echten DOM’s. Der Abstraktionsgrad kann je nach Frameblock abweichen. Die JSON-Kopie ist im Vergleich zum normalen DOM schneller, denn die Änderungen werden nach einem speziellen Algorithmus gruppiert und gesammelt auf den echten DOM überführt. Während der echte DOM nach jeder Änderung in den Arbeitsspeicher neu geladen wird, existiert die virtuelle Repräsentation dauerhaft im Arbeitsspeicher und wird je nach Algorithmus gruppiert nachgeladen.

Beispielsweise hat die React-Library eine virtuelle Repräsentation des DOM’s mit entsprechendem Algorithmus (Diffing: Breadth First) implementiert. Da React jedoch nicht Zweck des Beitrags ist, verzichte ich bewusst auf weiter Details.

Was ist Shadow DOM?

Shadow DOM ist wie ein introvertierter Kerl, der sich von seiner Umwelt abkapselt und an Änderungen in seiner Außenwelt nicht interessiert ist. Ähnlich einer Komponente in Angular, wird einem HTML-Element beim Rendering ein neuer DOM hinzugefügt. D. h. ein Shadow DOM kann nur existieren, falls ein übergeordneter DOM existiert. In eigenen Worten ausgedrückt, Shadow DOM erlaubt es Logik oder Styles, hinter anderen HTML-Elementen, zu verstecken bzw. zu entkapseln.

Quellen:

https://develoger.com/shadow-dom-virtual-dom-889bf78ce701

ISBN: 978-3-8362-6226-2