Warum Virtual DOM: Render und Leistung-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Warum Virtual DOM: Render und Leistung

Nov 03, 2024 pm 02:11 PM

In diesem Artikel werden wir den Dom im Detail untersuchen und erläutern, was der virtuelle Dom ist.

Was ist das DOM (Document Object Model)?

Wenn eine Webseite in den Browser geladen wird, generiert der Browser HTML, um die angeforderte Seite anzuzeigen. Diese HTML-Struktur ist wie ein Baum. DOM entsteht durch die Konvertierung des Inhalts eines Webdokuments (HTML oder XML) in eine objektorientierte Struktur durch den Browser. Dank dieser Struktur ist der Seiteninhalt in einer Baumstruktur im Browser organisiert, und jedes HTML-Tag oder Inhalt wird als „Knoten“ dargestellt.

Erkunden Sie nun das Dokumentobjektmodell :

Lassen Sie uns einen Beispielcode schreiben, um auf das Dokumentobjekt zuzugreifen.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document object model&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="card" style="width: 18rem;"&gt;
        &lt;img class="card-img-top"  alt="Card image cap"&gt;
        &lt;div class="card-body"&gt;
          &lt;h5 class="card-title"&gt;Lorem, ipsum dolor.&lt;/h5&gt;
          &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!&lt;/p&gt;
          &lt;a href="#" class="btn btn-primary"&gt;Lorem, ipsum.&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;


    &lt;script src="/script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

console.log(document)

Nach dem Login kopieren

Ausgabe:

Why Virtual DOM: Render and Performance

Wir können mit console.log(document) auf den Dom zugreifen. Wenn wir das Document-Objekt untersuchen, verstehen wir, dass dieses Objekt ein HTML-Dokument darstellt. Mit anderen Worten: Das Dokumentobjekt enthält alle Tags in einem HTML-Dokument.

Mit Javascript können wir auf die Tags im Dokumentobjekt zugreifen und die Tags in diesem Dokumentobjekt bearbeiten, um dynamische Webseiten zu erstellen. Lassen Sie uns ein Beispiel für den Zugriff geben:

const wrapper = document.getElementById("card")

console.log(wrapper)

Nach dem Login kopieren

Ausgabe:

Why Virtual DOM: Render and Performance

Was ist das virtuelle DOM?

Why Virtual DOM: Render and Performance

Wir wissen jetzt, dass der einfachste Weg, den Dom zu ändern („Change HTML“) darin besteht, die innerHTML-Eigenschaft in einem Element zu ändern. Diese Methode der HTML-Änderung hat keine gute Leistung beim Neuzeichnen von DOM („Aktualisierung dessen, was der Benutzer sieht“). Dies liegt an innerHTML muss DOM-Knoten aus einer Zeichenfolge analysieren, vorverarbeiten und anhängen. Wenn auf einer Webseite zu viele HTML-Mutationen vorhanden sind, liegt ein Leistungsproblem vor.

Wie wurde das Leistungsproblem behoben?

Dieses Problem wurde durch die Erstellung eines virtuellen DOM behoben. Das virtuelle DOM ist eine Kopie des im Speicher gespeicherten echten DOM. Wenn der Benutzer mit der Webseite interagiert und der Status der Webseite aktualisiert wird, wird ein neues virtuelles DOM im Speicher erstellt. Dieses neue virtuelle DOM wird mit dem vorherigen virtuellen DOM verglichen, um Änderungen zu identifizieren, und diese Änderungen werden auf das echte DOM angewendet, um dem Benutzer angezeigt zu werden.

Dies ist die Arbeitslogik der modernen Bibliotheken, die Sie verwenden, und verwendet zum Vergleich den dif-Algorithmus. Sie alle verwenden virtuelles DOM. Obwohl der virtuelle DOM-Ansatz schnell ist, gibt es Punkte, die für die Leistung berücksichtigt werden müssen. Eine Änderung in der virtuellen Domäne rendert die gesamte Webseite. Bibliotheken verfügen über Hooks für Leistungsoptimierungen

Abschluss

In diesem Artikel haben wir untersucht, was Dom und virtuelles DOM sind. Wir haben herausgefunden, warum Virtual Dom verwendet wird. Jetzt wissen Sie, was Dom und virtueller Dom sind.

Das obige ist der detaillierte Inhalt vonWarum Virtual DOM: Render und Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn