Bevor wir verstehen, was DOM Diffing ist, sollten wir wissen, was DOM ist und was sein Zweck ist. In diesem Artikel lernen wir die beiden Versionen von DOM kennen, die reale und die virtuelle, und dann werden wir behandeln, was DOM-Unterschiede sind.

Was ist ein DOM: Im formalen Sinne ist ein DOM eine Anwendungsprogrammierschnittstelle (API) für Dokumente. DOM definiert eine logische Struktur für ein Dokument und hilft Entwicklern, auf ein Dokument zuzugreifen und es zu bearbeiten. Es ähnelt sehr stark den Dokumentenmodellen. Betrachten Sie beispielsweise die folgende HTML- Liste.

<ul>
  <li></li>
  <li></li>
  <ol>
    <li></li>
    <li></li>
  </ol>
</ul>

Das DOM stellt die Liste wie folgt dar:

DOM-Darstellung der HTML-Liste

Wie wir sehen können, ist ein DOM einem Baum sehr ähnlich .

Lassen Sie uns nun das Konzept von Virtual DOM verstehen.

Beginnen wir die Antwort mit dem Warum. Jedes Mal, wenn sich die Benutzeroberfläche unserer Anwendung ändert, wird das DOM aktualisiert, was bedeutet, dass der gesamte Baum aktualisiert wird, und dann werden die UI-Komponenten neu gerendert. Dieses erneute Rendern von UI-Elementen jedes Mal, wenn eine kleine Änderung eine Anwendung langsam macht, und je dichter Ihre UI ist, desto langsamer werden unsere DOM-Updates. Und hier kommt ein Virtual DOM ins Spiel. Ein virtuelles DOM ist eine virtuelle Darstellung eines oben diskutierten realen DOM. Wenn es jetzt eine Zustandsänderung in der Benutzeroberfläche unserer Anwendung gibt, wird nur das virtuelle DOM anstelle des realen DOM aktualisiert. Die nächste Frage ist, wie die Aktualisierung des virtuellen DOM die Leistung verbessert. 

DOM Diffing:   Immer wenn sich der Zustand der UI-Elemente ändert, wird ein neues virtuelles DOM erstellt. Dann werden das neue virtuelle DOM und das vorherige virtuelle DOM miteinander verglichen. Dieser Vergleich wird als DOM-Vergleich bezeichnet .

Die Absicht besteht darin, minimale Operationen auf dem realen DOM auszuführen, daher wird nach dem Vergleich der beste Weg zum Aktualisieren des realen DOM berechnet, was zu einer effizienten Aktualisierung der Benutzeroberfläche führt.

Das folgende Bild zeigt den Diffing-Vorgang:

DOM-Unterschied

Das Bild zeigt, dass das Update auf das reale DOM so weit wie möglich verschoben wird. Der rote Node stellt eine Zustandsänderung dar; dann werden die Änderungen durch DOM-Diffing berechnet, und schließlich wird das neue virtuelle DOM stapelweise auf das reale DOM aktualisiert.

Fazit: Die Aktualisierung der Benutzeroberfläche ist sehr teuer; Das Aktualisieren des realen DOM in Stapeln verbessert die Gesamtleistung beim Neuzeichnen der Benutzeroberfläche.