Analysieren Sie die zugrunde liegenden Prinzipien der WeChat-Miniprogramme

Es gibt drei Hauptmethoden zum Rendern von Seiten

Empfohlen: „Mini-Tutorial zur Programmentwicklung“

1.Web-Rendering

2.Natives Rendering

3.Web und Native werden gemischt, also Hybrid-Rendering.

Das Miniprogramm wird in der dritten Form präsentiert.

Double-Threaded-Kommunikationsmethode

Warum brauchen wir Dual-Threading? -> Vermeiden Sie aus Sicherheitsgründen den Betrieb von DOM.

Die Rendering-Schicht und die Logikschicht des Applets werden jeweils von zwei Threads verwaltet: Die Schnittstelle der Rendering-Schicht verwendet WebView zum Rendern und die Logikschicht verwendet JsCore-Threads zum Ausführen von JS-Skripten.

Das Framework des WeChat-Applets besteht aus zwei Teilen: der Ansichtsschicht und der APP-Service-Logikschicht. Die

Ansichtsebene wird zum Rendern der Seitenstruktur verwendet, und der

AppService wird für die Logikverarbeitung, Datenanforderungen und Schnittstellenaufrufe verwendet.

In zwei Prozessen ausführen (zwei Webansichten).

Die Ansichtsschicht und die Logikschicht kommunizieren über die JSBridage der Systemschicht.

Logikschicht: Erstellen Sie einen separaten Thread zum Ausführen von JavaScript. In dieser Umgebung werden alle Codes im Zusammenhang mit der Geschäftslogik des Miniprogramms ausgeführt.

Rendering-Schicht: Alle Aufgaben im Zusammenhang mit dem Schnittstellen-Rendering in webView In einem Thread ausgeführt, steuert der Code in der Logikschicht, welche Schnittstellen gerendert werden.

Ein kleines Programm verfügt über mehrere Schnittstellen, sodass es in der Rendering-Ebene mehrere Webview-Threads gibt.

Die Kommunikation zwischen der Logikschicht und der Rendering-Schicht wird von Native (WeChat-Client) weitergeleitet.

Die von der Logikschicht gesendeten Netzwerkanfragen werden ebenfalls von Native weitergeleitet.

Javascript auswerten

Die Datenübertragung zwischen der Ansichtsschicht und der Logikschicht wird tatsächlich über das von beiden Seiten bereitgestellte EvaluierungsJavascript implementiert. Das heißt, die vom Benutzer übertragenen Daten müssen in einen String umgewandelt und weitergegeben werden. Gleichzeitig wird der konvertierte Dateninhalt in ein JS-Skript gespleißt und dann an die unabhängige Umgebung auf beiden Seiten übergeben Form eines JS-Skripts.

Da die Ausführung von „evalueJavascript“ von vielen Aspekten beeinflusst wird, erfolgen die Daten, die auf der Ansichtsebene ankommen, nicht in Echtzeit. Unsere setData-Funktion sendet Daten asynchron von der Logikschicht an die Ansichtsschicht.

Vorlagendatenbindungslösung

1. Analysieren Sie die Grammatik, um AST zu generieren

2. Aktualisieren Sie die Daten Bindung an Vorlage

Abstrakter Syntaxbaum (abgekürzt als AST)

Der dritte Punkt, der am wahrscheinlichsten zu Leistungsproblemen führt, ist hauptsächlich der dritte Punkt. Was die Lösung für die Datenaktualisierung betrifft, reagieren Sie zuerst Das vorgeschlagene virtuelle DOM-Design wird mittlerweile grundsätzlich von den meisten Frameworks übernommen, und Miniprogramme bilden da keine Ausnahme.

Virtueller DOM-Mechanismus virtueller Dom

Verwenden Sie JS-Objekte, um DOM-Bäume zu simulieren-> Vergleichen Sie die Unterschiede zwischen zwei DOM-Bäumen-> Im DOM-Baum

1. Konvertieren Sie WXML in das entsprechende JS-Objekt in der Rendering-Ebene

2. Wenn Datenänderungen in der Logikebene auftreten, verwenden Sie die von der Host-Umgebung bereitgestellte setData-Methode Entfernen Sie die Daten aus der Logik. Die Ebene wird an Native übergeben und dann an die Rendering-Ebene weitergeleitet.

3 Nachdem Sie die Unterschiede vorher und nachher verglichen haben, wenden Sie die Unterschiede auf den ursprünglichen DOM-Baum an und aktualisieren Sie die Schnittstelle

Basisbibliothek des Miniprogramms

Die Basisbibliothek des Applets ist in JavaScript geschrieben, das zur Ausführung in die Rendering-Ebene und die Logikebene eingefügt werden kann. Wird hauptsächlich verwendet für:

In der Rendering-Ebene werden verschiedene Komponenten zum Zusammenstellen der Elemente der Seite bereitgestellt.

In der Logikebene werden verschiedene APIs zur Verarbeitung verschiedener Elemente bereitgestellt.

Verarbeitet eine Reihe von Framework-Logiken wie Datenbindung, Komponentensystem, Ereignissystem, Kommunikationssystem usw.

Die Rendering-Schicht und die Logikschicht des Applets werden von zwei Threads verwaltet Jeder Thread fügt eine Basisbibliothek ein.

Die Basisbibliothek des Miniprogramms wird nicht in den Code des Miniprogramms gepackt, sondern vorab in den WeChat-Client integriert. Auf diese Weise können Sie:

die Codepaketgröße des Business-Applets reduzieren

Sie können Fehler in der Basisbibliothek unabhängig beheben, ohne das Codepaket des Business-Applets zu ändern

Exparser

Exparser ist das Komponentenorganisations-Framework des WeChat-Miniprogramms. Es ist in die Basisbibliothek des Miniprogramms integriert und bietet grundlegende Unterstützung für verschiedene Komponenten des Miniprogramms. Alle Komponenten im Miniprogramm, einschließlich integrierter Komponenten und benutzerdefinierter Komponenten, werden von Exparser organisiert und verwaltet.

Dual-Threaded-Rendering-Mechanismus

Dual-Threaded-Rendering ist eigentlich eine Kombination der vorherigen Reihe von Mechanismen.

1. Durch die Vorlagendatenbindung und den virtuellen DOM-Mechanismus stellt das Applet DSL eine Datenbindungssyntax und eine Rendering-Ebene zur Beschreibung der Seitenstruktur zur Verfügung.

<view> {{ message }} </view> <view wx:if="{{condition}}"> </view> <checkbox checked="{{false}}"> </checkbox>

2. Das Applet stellt eine API zum Festlegen von Seitendaten in der Logikschicht bereit.

this.setData({
key : value
});

3 Wenn die Logikschicht die Seite ändern muss, muss sie nur die geänderten Daten übergeben die Rendering-Ebene über setData.

Die übertragenen Daten werden zur Übertragung in String-Form umgewandelt, daher sollten Sie die Übertragung großer Datenmengen vermeiden.

4. Die Rendering-Ebene generiert den virtuellen DOM-Baum gemäß dem Rendering-Mechanismus neu und aktualisiert ihn auf den entsprechenden DOM-Baum, was zu Schnittstellenänderungen führt.

• Native Komponenten einführen

• Umgehen Sie den SetData-, Datenkommunikations- und Re-Rendering-Prozess, um die Rendering-Leistung zu verbessern.

• Erweitern Sie die Möglichkeiten des Webs. Beispielsweise verfügen Eingabefeldkomponenten (Eingabe, Textbereich) über die Möglichkeit, die Tastatur besser zu steuern.

• Bessere Erfahrung bei gleichzeitiger Reduzierung des Rendering-Aufwands von WebView. Beispielsweise belegt die Rendering-Arbeit komplexerer Komponenten wie Kartenkomponenten nicht den WebView-Thread, sondern wird zur nativen Verarbeitung an den effizienteren Client übergeben.

Rendering-Prozess nativer Komponenten:

• Die Komponente wird erstellt und den Komponenteneigenschaften werden nacheinander Werte zugewiesen.

• Die Komponente wird in den DOM-Baum eingefügt und der Browser-Kernel berechnet sofort das Layout. Zu diesem Zeitpunkt können wir die Position (x-, y-Koordinaten), Breite und Höhe ablesen der Komponente relativ zur Seite. Die

• -Komponente benachrichtigt den Client, dass der Client entsprechend der Breite und Höhe einen nativen Bereich an derselben Position einfügt, und der Client rendert dann die Schnittstelle in diesem Bereich.

• Wenn sich die Position oder Breite und Höhe ändert, benachrichtigt die Komponente den Kunden, um entsprechende Anpassungen vorzunehmen.

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die zugrunde liegenden Prinzipien der WeChat-Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!