Detaillierte Erklärung des DOM DIFF-Algorithmus in der React-Anwendung

Vorwort

Für diejenigen unter uns, die sich mit Front-End-Entwicklung beschäftigen, sind die beiden beliebtesten Front-End-Frameworks zweifellos React und Vue. Ich glaube, jeder ist mit diesen beiden Frameworks sehr vertraut. Diese beiden Frameworks haben jedoch alle die Verwendung der traditionellen DOM-Technologie aufgegeben und die JS-basierte Virtual DOM-Technologie übernommen, die auch als virtuelles DOM bezeichnet werden kann. Also, was genau ist Virtual DOM? Aus welchem ​​Grund verwenden die beiden gängigen Frameworks Virtual DOM? Als Nächstes möchte ich Ihnen als Front-End-Entwickler die Genialität des DOM-DIFF-Algorithmus erklären.

Was ist ein virtueller DOM?

Wie der Name schon sagt, ist Virtual DOM ein virtueller DOM. Seine Funktion besteht darin, Javascript zu verwenden, um die DOM-Struktur zu simulieren und die Änderungen des DOM in der JS-Ebene zu vergleichen. Die spezifischen Vorgänge sind wie folgt:

// Gewöhnliche HTML-DOM-Struktur <ul class="list">
   <li class="item">warum?</li>
   <li class="item">Yi Yang Qianxi</li>
</ul>

// Zugeordneter virtueller DOM
{
   tag:'ul',
   Requisiten:{
       Klasse: 'Liste'
   },
   Kinder: [
       {
           tag:'li',
           Requisiten:{
               Klasse: 'Artikel'
           },
           Kinder: ['Yi Yang Qianxi']
       }
   ]
}

Einige Freunde sind vielleicht etwas verwirrt. Ist die normale HTML-DOM-Struktur nicht schlecht? Es ist leicht zu verstehen und der Code ist prägnanter. Warum müssen wir verschachtelte rekursive virtuelle DOMs verwenden? Tatsächlich hängt dies damit zusammen, dass gewöhnliche DOMs beim erneuten Rendern viel Leistung verbrauchen. DOM-Operationen scheinen einfach zu sein, aber tatsächlich ist die Effizienz ziemlich gering. Dies liegt daran, dass virtuelle DOMs, die komplizierter aussehen und eine JS-Struktur verwenden, effizienter sind, wenn sie im realen DOM häufig geändert werden müssen.

Gründe für die Verwendung von Virtual DOM

DOM-Rendering-Seitenvorgangsprozess

• Wenn der Browser die entsprechende HTML-Datei über den Domänennamen vom Server erhält, erstellt der Browser zunächst den DOM-Baum und den CSSOM-Baum. Was das Konzept des Baums betrifft, sind Studenten, die Datenstrukturen und Algorithmen studiert haben, möglicherweise vom Konzept der Baumknoten beeindruckt.
• Im HTML-DOM ist alles ein Knoten, und DOM wird in HTML als Knotenbaum betrachtet, und jeder Knoten hat eine entsprechende hierarchische Beziehung. Der DOM-Knotenbaum entspricht den Tags in HTML nacheinander und bildet den DOM-Baum
• HTML-Datei

• HTML-DOM-Baum

Dasselbe. In einem CSS-Dokument sind alle Elemente Knoten, die eins zu eins den Tags in HTML entsprechen und den CSSOM-Baum wie unten gezeigt bilden:

warnen! Wenn während der Erstellung des DOM-Baums JS-bezogener Inhalt gefunden wird, wird die Erstellung des DOM-Baums sofort gestoppt. Dies liegt daran, dass JS auf DOM-Knoten arbeiten kann. Um zu verhindern, dass JS den fertigen DOM beeinflusst, verhindert der Browser die Erstellung des DOM-Baums, um Ressourcen zu sparen.

Während der DOM-Baum und der CSSOM-Baum kontinuierlich aufgebaut werden, wird auch der Rendering-Baum allmählich gebildet. Der Browser führt basierend auf dem aufgebauten Rendering-Baum Layout- und Zeichenprozesse für Webseiten aus und erstellt kontinuierlich Webseiten. Das spezifische Betriebsablaufdiagramm sieht wie folgt aus:

Im Allgemeinen führen wir für routinemäßige Seitenrenderingvorgänge normalerweise DOM-Operationen aus, ändern und setzen innerHTML zurück, um das Seitenrendering abzuschließen. Bei jeder DOM-Aktualisierungsoperation wird der Renderingvorgang erneut ausgeführt, und dieser Vorgang umfasst das Neuzeichnen und Neuanordnen der Seite.

Vorteile von Virtual DOM

Bei umfangreichen Seitenprojekten oder Webseiten mit mehreren Tags und Attributen sind herkömmliche DOM-Operationen jedoch zu zeitaufwändig. Jede einfache Änderung erfordert das Neuzeichnen und Neuanordnen einer großen Anzahl von DOM-Knoten, was die Effizienz der Seitendarstellung erheblich verringert. Wenn Front-End-Entwickler angesichts von DOM-Engpässen nicht weiterkommen, zeigt Virtual DOM seine große Überlegenheit als leichtes JavaScript-Objekt und gewinnt erfolgreich die Gunst von Front-End-Entwicklern.

Wenn die Seite erneut gerendert wird, führt Virtual DOM zweimal eine DOM-Diff-Berechnung und einen Vergleich durch und findet den Unterschied. Es müssen nur die verschiedenen Teile des DOM-Baums geändert werden. Es ist auch verständlich, dass Virtual DOM eine Middleware ist. Zunächst wird JS verwendet, um Virtual DOM zu ändern. Nach dem Vergleichen der Unterschiede werden alle Änderungen dem realen DOM der Seite hinzugefügt. Daher besteht der größte Vorteil von Virtual DOM darin, dass es nach dem Vergleichen kein neues DOM wie natives DOM erstellen und neu erstellen muss, da dies für den Betrieb großer Projekte sehr leistungsintensiv und kostspielig ist. Es ist ersichtlich, dass es unabhängig von der Größe der Webseite zweifellos eine sehr effiziente und ausgezeichnete Wahl ist, das traditionelle DOM aufzugeben und Virtual DOM zu übernehmen.

So stellen Sie DOM mit virtuellem DOM dar

Erstellen Sie zunächst ein neues Dom-Diff-Projekt in vscode, initialisieren Sie das Projekt und installieren Sie die entsprechenden Komponenten

Da es sich um einen DOM-Baum handelt, wird beim Konvertieren von HTML in einen DOM-Baum eine rekursive Form verwendet: Erstellen Sie zuerst den Knoten, legen Sie dann die Attribute fest und legen Sie dann die untergeordneten Knoten fest.

<ul Klasse="Liste">
    <li class="item">warum?</li>
    <li class="item">Yi Yang Qianxi</li>
</ul> 

// Konvertierungsformular für DOM-Baumausdrücke let virtualDOM = createElement('ul', {
  Klasse: 'Liste',
}, [
  Element erstellen('li',{
    Klasse: 'Artikel'
  },['wjy']),
  Element erstellen('li',{
    Klasse: 'Artikel'
  },['Yi Yang Qianxi']),
])

Erstellen Sie dann eine neue Datei element.js, um sie extern auszugeben und das Rendern der Seite abzuschließen.

// Konstruiere einen virtuellen DOM-Knoten durch die Element-Konstruktorklasse Element {
    Konstruktor (Typ, Requisiten, Kinder) {
        dieser.Typ = Typ;
        this.props = Requisiten;
        dies.Kinder =Kinder;
    }
}
// 
const createElement = (Typ, Requisiten, untergeordnete Elemente) => { 
  gibt neues Element (Typ, Requisiten, untergeordnete Elemente) zurück;
}

// Rendern Sie die Seite und konvertieren Sie Virtual Dom in reales DOM
const render = (domObj) => {  
    : Lassen Sie el = document.createElement(domObj.type);
    für (let-Schlüssel in domObj.props) {
        setAttr(el,Schlüssel,domObj.props[Schlüssel]);
    }
    domObj.children.forEach(Kind => {
        Kind = (Kindinstanz des Elements)
        ? rendern(Kind)
        : Dokument.createTextNode(Kind);
        el.appendChild(Kind);

    })
    Rückgabe el;
}

Funktion setAttr(Knoten,Schlüssel,Wert){
    Schalter(Schlüssel){
        Fall 'Wert':
            wenn(node.tagName.toLowerCase() === 'Eingabe' || 
            node.tagName.toLowerCase() === 'Textbereich'
            ){
                Knoten.Wert = Wert;
            }anders{
                node.setAttribute(Schlüssel,Wert)
            }
            brechen;
            Fall 'Stil':
            // node.setAttribute('Stil',Wert)
            node.style.cssText = Wert;
            brechen;
            Standard:
                node.setAttribute(Schlüssel,Wert)
            brechen;
    }
}

// Mounten Sie das echte DOM am angegebenen Stammknoten const renderDOM = (el,target) => {
    Ziel.AnhängenKind(el);
}

//Export nach außen
    Element erstellen,
    machen,
    renderDOM
}

Holen Sie sich den echten DOM auf der Konsole

Seitendarstellung erfolgreich! 😃

DOM DIFF-Algorithmus

Nachdem der Benutzer den interaktiven Seitenvorgang geändert hat, ändern sich die Knoten im virtuellen DOM-Baum, die realen Knoten ändern sich jedoch zu diesem Zeitpunkt nicht. Um die Änderungen mit der realen Seite zu synchronisieren, verwenden wir den DOM DIFF-Algorithmus, um den Unterschied zwischen den beiden Bäumen zu ermitteln, generieren dann ein Differenz-Patch-Objekt und wenden das Differenz-Patch-Objekt dann auf den realen DOM-Knoten an, wodurch das Rendern und Aktualisieren der Seite abgeschlossen wird.

Die Zeitkomplexität des traditionellen Diff-Algorithmus erreicht O(n^3). Wenn das Ziel erreicht werden soll, jedes Mal die gesamte Seite zu aktualisieren, kann dieser exponentiell wachsende Leistungsaufwand die Leistungsanforderungen nicht erfüllen. Daher haben die Facebook-Ingenieure dies optimiert und die Komplexität des Diff-Algorithmus durch die Formulierung einer Diff-Strategie auf O(n) reduziert.

Diff-Strategie

• Es gibt nur sehr wenige ebenenübergreifende Operationen auf DOM-Knoten, daher können sie ignoriert werden.
• Zwei Komponenten derselben Klasse erzeugen ähnliche Baumstrukturen, und zwei Komponenten unterschiedlicher Klassen erzeugen unterschiedliche Baumstrukturen.
• Eine Gruppe von untergeordneten Knoten auf derselben Ebene, die durch die UUID unterschieden werden können
  

Diff-Granularität

Aufgrund der unterschiedlichen Granularität von DIFF wird der DIFF-Algorithmus in der folgenden Reihenfolge ausgeführt:

• Baum-DIFF
  
• Komponente DIFF
• Element DIFF
  

Patchen

Wir vergleichen die beiden virtuellen DOMs durch Tiefendurchquerung gemäß der Diff-Strategie und dem Vergleichsalgorithmus in React Diff. Wenn es Unterschiede gibt, werden die Operationen, die den Indexwerten der durchlaufenen Knoten entsprechen, gespeichert, auch als Patch-Objekte bezeichnet.

Dann wird zuerst der echte DOM erneut gründlich durchlaufen, und der Index im Patch-Objekt entspricht dem DOM, und wir haben den DOM-Aktualisierungsvorgang abgeschlossen.

Fazit: Im Internet ist das jederzeitige Aktualisieren interaktiver Seiten beim Surfen im Internet eine Routineoperation. Diese einfache Operation ist jedoch das Ergebnis mehrerer Algorithmusoptimierungen. Das zugrunde liegende Prinzip von DOM DIFF ist ziemlich kompliziert. Wenn Sie interessiert sind, können Sie selbst nach relevanter Literatur suchen. Da dieser Artikel nur eine oberflächliche Analyse ist, werden zu viele Aspekte nicht näher erläutert. Wenn dieser Artikel Fehler oder Auslassungen enthält, können Sie diese gerne korrigieren! Akzeptieren Sie demütig jede vernünftige Kritik! 😉

Wenn Ihnen dieser Artikel hilft, den DOM-Diff-Algorithmus zu verstehen, hoffe ich, dass Sie mir einen Daumen hoch geben können. Ich bin ein Neuling in der Frontend-Entwicklung. Jeder Daumen hoch ist für mich Motivation, weiterzumachen. Ich werde den Blog von Nuggets weiterhin aktualisieren.

Oben finden Sie eine ausführliche Erläuterung des DOM DIFF-Algorithmus in React-Anwendungen. Weitere Informationen zum DOM DIFF-Algorithmus in React-Anwendungen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!