React
Performance

Die Grundlagen - HTML DOM vs. Virtual DOM

HTML-DOM ist teuer

Jede Webseite wird intern als Objektbaum dargestellt. Diese Darstellung wird als Document Object Model bezeichnet . Darüber hinaus handelt es sich um eine sprachneutrale Schnittstelle, über die Programmiersprachen (wie JavaScript) auf die HTML-Elemente zugreifen können.

Mit anderen Worten

Das HTML-DOM ist ein Standard zum Abrufen, Ändern, Hinzufügen oder Löschen von HTML-Elementen.

Diese DOM-Vorgänge sind jedoch extrem teuer .

Virtual DOM ist eine Lösung

Das Team von React kam daher auf die Idee, das HTML-DOM zu abstrahieren und ein eigenes virtuelles DOM zu erstellen, um die Mindestanzahl an Operationen zu berechnen, die auf dem HTML-DOM ausgeführt werden müssen, um den aktuellen Status unserer Anwendung zu replizieren.

Das virtuelle DOM spart Zeit durch unnötige DOM-Änderungen.

Wie genau?

Zu jedem Zeitpunkt wird der Anwendungsstatus von React als Virtual DOM . Bei jeder Änderung des Anwendungsstatus werden diese Schritte von React ausgeführt, um die Leistung zu optimieren

1. Generieren Sie ein neues virtuelles DOM , das den neuen Status unserer Anwendung darstellt

2. Vergleichen Sie das alte virtuelle DOM (das das aktuelle HTML-DOM darstellt) mit dem neuen virtuellen DOM

3. Basierend auf 2. ermitteln Sie die Mindestanzahl an Operationen, um das alte virtuelle DOM (das das aktuelle HTML-DOM darstellt) in das neue virtuelle DOM umzuwandeln

• Um mehr darüber zu erfahren, lesen Sie den Diff-Algorithmus von React

4. Nachdem diese Vorgänge gefunden wurden, werden sie ihren entsprechenden HTML-DOM- Vorgängen zugeordnet

• Denken Sie daran, dass das virtuelle DOM nur eine Abstraktion des HTML-DOM ist und zwischen diesen eine isomorphe Beziehung besteht

5. Jetzt wird die minimale Anzahl von Operationen, die gefunden und in ihre entsprechenden HTML-DOM- Operationen übertragen wurden, nun direkt auf das HTML-DOM der Anwendung angewendet, wodurch Zeit eingespart wird, die das HTML-DOM unnötig ändert .

Hinweis: Auf das virtuelle DOM angewendete Vorgänge sind billig, da das virtuelle DOM ein JavaScript-Objekt ist.

Der Diff-Algorithmus von React

Die Erzeugung der Mindestanzahl von Operationen zum Umwandeln eines Baums in einen anderen hat eine Komplexität in der Reihenfolge O (n ^ 3), wobei n die Anzahl der Knoten in dem Baum ist. React stützt sich auf zwei Annahmen, um dieses Problem in einer linearen Zeit zu lösen - O (n)

1. Zwei Komponenten derselben Klasse erzeugen ähnliche Bäume, und zwei Komponenten verschiedener Klassen erzeugen unterschiedliche Bäume.

2. Es ist möglich, einen eindeutigen Schlüssel für Elemente bereitzustellen, der für verschiedene Renderings stabil ist.

Um zu entscheiden, ob zwei Knoten unterschiedlich sind, unterscheidet React drei Fälle

1. Zwei Knoten unterscheiden sich, wenn sie unterschiedliche Typen haben.

• Beispielsweise unterscheidet sich <div>...</div> von <span>...</span>

2. Immer wenn zwei Knoten unterschiedliche Schlüssel haben

• Beispielsweise unterscheidet sich <div key="1">...</div> von <div key="2">...</div>

Darüber hinaus ist das Folgende entscheidend und äußerst wichtig, wenn Sie die Leistung optimieren möchten

Wenn sie [zwei Knoten] nicht vom selben Typ sind, wird React nicht einmal versuchen, das zu vergleichen, was sie rendern. Es wird nur die erste aus dem DOM entfernt und die zweite eingefügt.

Hier ist der Grund

Es ist sehr unwahrscheinlich, dass ein Element ein DOM erzeugt, das wie ein Element aussehen würde. Anstatt zu versuchen, diese beiden Strukturen abzugleichen, baut React den Baum einfach von Grund auf neu auf.

Tipps

Wenn zwei Knoten nicht vom selben Typ sind, versucht React nicht, sie zuzuordnen - es entfernt lediglich den ersten Knoten aus dem DOM und fügt den zweiten ein. Deshalb sagt der erste Tipp

1. Wenn Sie sehen, dass Sie zwischen zwei Komponentenklassen mit sehr ähnlicher Ausgabe wechseln, möchten Sie sie möglicherweise derselben Klasse zuordnen.

2. Verwenden Sie shouldComponentUpdate, um zu verhindern, dass die Komponente erneut ausgegeben wird, wenn Sie wissen, dass sich die Komponente zum Beispiel nicht ändert

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}

Leistungsmessung mit ReactJS

Sie können nichts verbessern, was Sie nicht messen können . Um die Leistung von React-Komponenten zu verbessern, sollten Sie sie messen können. ReactJS bietet mit angebauter Tools Leistung zu messen. Importieren Sie das react-addons-perf Modul, um die Leistung zu messen

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

Sie können die folgenden Methoden aus dem importierten Perf Modul verwenden:

• Perf.printInclusive ()
• Perf.printExclusive ()
• Perf.printWasted ()
• Perf.printOperations ()
• Perf.printDOM ()

Das wichtigste, das Sie meistens benötigen werden, ist Perf.printWasted() das Ihnen die tabellarische Darstellung der verschwendeten Zeit Ihrer einzelnen Komponente gibt

Sie können die Spalte " Verschwendete Zeit" in der Tabelle beachten und die Leistung der Komponente mithilfe des obigen Tipps & Tricks verbessern

Lesen Sie den offiziellen React-Leitfaden und den ausgezeichneten Artikel von Benchling Engg. auf React Performance