Warum gilt das Konzept des Virtual DOM von React als performanter als das Dirty-Model-Checking?

Question

Ich habe einen React Entwickler-Talk bei (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) gesehen und der Sprecher erwähnte, dass das dirty-checking des Modells langsam sein kann. Aber ist das Berechnen des Unterschieds zwischen virtuellen DOMs tatsächlich noch weniger performant, da der virtuelle DOM in den meisten Fällen größer sein sollte als das Modell?

Ich mag das Potenzial der Virtual DOM (insbesondere das serverseitige Rendern) wirklich gern, würde aber gerne alle Vor- und Nachteile kennen.

Answer 1

Das Virtual-DOM wurde nicht von React erfunden. Es ist Teil des HTML-DOM. Es ist leichtgewichtig und von den browser-spezifischen Implementierungsdetails getrennt.

Wir können uns das Virtual-DOM als lokale und vereinfachte Kopie des HTML-DOM von React vorstellen. Es ermöglicht React, seine Berechnungen in dieser abstrakten Welt durchzuführen und die „echten“ DOM-Operationen, die oft langsam und browser-spezifisch sind, zu überspringen. Tatsächlich gibt es keinen großen Unterschied zwischen DOM und VIRTUAL DOM.

Im Folgenden sind die Gründe aufgeführt, warum Virtual Dom verwendet wird (Quelle Virtual DOM in ReactJS):

Wenn Sie Folgendes tun:

document.getElementById('elementId').innerHTML = "Neuer Wert" Folgendes passiert:

1. Der Browser muss das HTML parsen
2. Es entfernt das Kindelement von elementId
3. Aktualisiert den DOM-Wert mit dem neuen Wert
4. Wiederholt die CSS-Berechnungen für Eltern und Kind
5. Aktualisiert das Layout, d.h. die genauen Koordinaten jedes Elements auf dem Bildschirm
6. Traversiert den Renderbaum und malt ihn im Browserfenster

Die Neuberechnung der CSS und geänderten Layouts erfolgt mit einem komplexen Algorithmus und beeinträchtigt die Leistung.

Sowie das Aktualisieren der DOM-Eigenschaften d.h. Werten. Es folgt einem Algorithmus.

Angenommen, Sie aktualisieren den DOM direkt 10 Mal, dann werden alle oben genannten Schritte nacheinander ausgeführt und die Aktualisierungsalgorithmen für den DOM werden Zeit benötigen, um die DOM-Werte zu aktualisieren.

Deshalb ist der echte DOM langsamer als der virtuelle DOM.