Eine kurze Analyse des Funktionsmechanismus von Miniprogrammen

Hintergrund zum Schreiben

Ich bin schon seit einiger Zeit mit Miniprogrammen in Kontakt gekommen. Im Allgemeinen ist die Schwelle für die Entwicklung von Miniprogrammen relativ niedrig, aber man muss trotzdem die grundlegende Funktionsweise verstehen Mechanismen und Prinzipien. „Zum Beispiel wurde mir während des Interviews eine Frage zu einem Miniprogramm gestellt. Hat das Miniprogramm ein Fensterobjekt? Er sagte ja“, aber tatsächlich ist es nicht so. Es fühlt sich an, als ob er einige der zugrunde liegenden Dinge des Miniprogramms nicht versteht. Letztendlich kann er nur dieses Tool verwenden, aber er versteht den Grund nicht.

Miniprogramme unterscheiden sich stark von der gewöhnlichen Webentwicklung. Dies muss von Grund auf in seiner technischen Architektur analysiert werden. Entwickler, die an Vue gewöhnt sind und auf die Entwicklung reagieren, werden sich beispielsweise darüber beschweren, dass das Erstellen einer neuen Seite für ein Miniprogramm umständlich ist. Die Seite muss aus mehreren Dateien bestehen, die Komponentenunterstützung ist unvollständig und jedes Mal sind die Daten in den Daten enthalten geändert, setData muss eingestellt werden. Es ist nicht so praktisch wie Vue Watch-Monitore und kann nicht mit npm, sass und weniger vorkompilierten Verarbeitungssprachen betrieben werden.

„Manche Leute sagen, dass Miniprogramme wie kastriertes Vue sind“, haha. Natürlich müssen wir die ursprüngliche Absicht des Miniprogrammdesigns verstehen. Warum wird diese technische Architektur übernommen und welche Vorteile bietet diese technische Architektur? Ich glaube, Sie werden sie verstehen, nachdem Sie dies verstanden haben. Im Folgenden werde ich den Funktionsmechanismus des Miniprogramms und seine gesamte technische Architektur aus den folgenden Perspektiven analysieren.

Verstehen Sie den Ursprung von Miniprogrammen

Bevor die Miniprogramme herauskamen, wurde WeChat WebView nach und nach zu einem wichtigen Einstieg in das mobile Web Es heißt JS-SDK und öffnet ein neues Fenster für alle Webentwickler, das es allen Entwicklern ermöglicht, die nativen Funktionen von WeChat zu nutzen, um Dinge zu erreichen, die bisher unmöglich oder schwierig waren.

Das JS-SDK-Modell löst jedoch nicht die Probleme einer schlechten Erfahrung bei der Nutzung mobiler Webseiten, wie z. B. die Möglichkeit eines weißen Bildschirms aufgrund eingeschränkter Geräteleistung und Netzwerkgeschwindigkeit. Daher wurde eine erweiterte Version des JS-SDK entwickelt, nämlich „WeChat Web Resource Offline Storage“, aber das Problem des weißen Bildschirms tritt immer noch auf komplexen Seiten auf. Der Grund dafür ist die Steifheit des Seitenwechsels und die Verzögerung beim Klicken. Zu diesem Zeitpunkt ist ein System erforderlich, das nicht vom JS-SDK verwaltet werden kann, um die Benutzererfahrung zu verbessern, und es sind kleine Programme entstanden.

Schnelles Laden

Leistungsstärkere Funktionen

Native Erfahrung

Benutzerfreundliches und sicheres Öffnen von WeChat-Daten

Effizient und einfach Entwicklung

Der Unterschied zwischen kleinen Programmen und gewöhnlicher Webseitenentwicklung

Im Vergleich zur gewöhnlichen Webseitenentwicklung ist die Entwicklung kleiner Programme ebenfalls sehr ähnlich , aber es gibt immer noch einige Unterschiede zwischen den beiden.

Gewöhnliche Webentwicklung kann die von verschiedenen Browsern bereitgestellte DOM-API verwenden, um DOM-Operationen auszuführen. Die Logikschicht und die Rendering-Schicht des Applets werden in JSCore ausgeführt und verfügen nicht über ein vollständiges Browserobjekt. , daher fehlen die zugehörige DOM-API und BOM-API.

Gewöhnliche Webentwicklungs-Rendering-Threads und Skript-Threads schließen sich gegenseitig aus, weshalb die Ausführung von Skripten über einen längeren Zeitraum dazu führen kann, dass die Seite nicht mehr reagiert. In kleinen Programmen werden die beiden getrennt und auf unterschiedlichen Threads ausgeführt.

Wenn Webentwickler Webseiten entwickeln, müssen sie nur einen Browser verwenden und einige Hilfstools oder Editoren verwenden. Die Entwicklung von Miniprogrammen ist anders. Sie muss den Prozess der Beantragung eines Miniprogrammkontos, der Installation von Miniprogramm-Entwicklertools, der Konfiguration von Projekten usw. durchlaufen.

Ausführungsumgebung des Miniprogramms

Miniprogrammarchitektur

1. Technologieauswahl

Allgemeines Zusammenfassend gibt es drei Technologien zum Rendern von Schnittstellen:

Rendering mit reiner clientseitiger nativer Technologie

Rendering mit reiner Web-Technologie

Verwendung clientseitiger nativer Technologie und Web-Technologie Kombinierte Hybridtechnologie (kurz Hybridtechnologie) zum Rendern

Anhand der folgenden Aspekte wird analysiert, welche technische Lösung für das Miniprogramm verwendet wird

Entwicklungsschwelle: Die Webschwelle ist niedrig, Native hat auch etwas wie RN Framework-Unterstützung

Erfahrung: Native Erfahrung ist viel besser als Web, Hybrid ist bis zu einem gewissen Grad näher an nativer Erfahrung als Web

Versionsaktualisierung: Web unterstützt Online-Updates, Native muss es sein zur Überprüfung an WeChat gepackt Veröffentlichung

Kontrolle und Sicherheit: Das Web kann Seiteninhalte überspringen oder ändern, und es gibt einige unkontrollierbare Faktoren und Sicherheitsrisiken

Da die Host-Umgebung des Miniprogramms WeChat ist Wenn Sie reine Client-Native-Technologie zum Schreiben von Miniprogrammen verwenden, muss der Miniprogrammcode jedes Mal zusammen mit dem WeChat-Code veröffentlicht werden. Diese Methode ist definitiv nicht machbar.

Daher ist es notwendig, über ein Ressourcenpaket zu verfügen, das wie bei der Webtechnologie jederzeit in der Cloud aktualisiert werden kann. Durch das Herunterladen auf die lokale Ebene kann die Schnittstelle nach der dynamischen Ausführung gerendert werden. Wenn Sie zum Rendern kleiner Programme reine Webtechnologie verwenden, kann es bei einigen komplexen Interaktionen zu Leistungsproblemen kommen. Dies liegt daran, dass in der Webtechnologie das Rendern der Benutzeroberfläche und die Ausführung von JavaScript-Skripten in einem einzigen Thread ausgeführt werden, was leicht zu einigen logischen Aufgaben führen kann Beanspruchen Sie UI-Rendering-Ressourcen.

Also haben wir schließlich die Hybrid-Technologie verwendet, die beides kombiniert, um das kleine Programm auf ähnliche Weise zu rendern, und der Code kann gleichzeitig auch online aktualisiert werden hat folgende Vorteile:

Erweitern Sie die Möglichkeiten des Webs. Eingabefeldkomponenten (Eingabe, Textbereich) können beispielsweise die Tastatur besser steuern

Die Erfahrung ist besser und es reduziert auch den Rendering-Aufwand von WebView

Umgehung von setData und Datenkommunikation und Neu-Rendering-Prozess, um die Rendering-Leistung zu verbessern

Die Verwendung von clientseitigem nativem Rendering zum Einbau einiger komplexer Komponenten kann eine bessere Leistung liefern

Dual-Thread-Modell

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

Warum ist es also so konzipiert? Um diese Probleme zu lösen, müssen wir Entwickler daran hindern, einige davon zu verwenden, z. B. das Fensterobjekt des Browsers, das Springen von Seiten und den Betrieb von DOM und dynamische Ausführung.

Wir können die JavaScript-Engine des Client-Systems, das JavaScriptCore-Framework unter iOS und die vom Tencent x5-Kernel bereitgestellte JsCore-Umgebung unter Android verwenden.

Diese Sandbox-Umgebung bietet lediglich eine reine JavaScript-Interpretations- und Ausführungsumgebung ohne browserbezogene Schnittstellen.

Dies ist der Ursprung des Dual-Thread-Modells des Miniprogramms:

Logikschicht: Erstellen Sie einen separaten Thread zum Ausführen von JavaScript. Der gesamte Code, der sich auf die Geschäftslogik des Miniprogramms bezieht, ist Hier ausgeführt, verantwortlich für die Logikverarbeitung, Datenanforderungen, Schnittstellenaufrufe usw.

Ansichtsebene: Alle Aufgaben im Zusammenhang mit der Schnittstellenwiedergabe werden im WebView-Thread ausgeführt, und welche Schnittstellen gerendert werden, wird über die Logikebene gesteuert Code. Ein kleines Programm verfügt über mehrere Schnittstellen, sodass es in der Ansichtsebene mehrere WebView-Threads gibt

JSBridge dient als Brücke zwischen der Entwicklung auf höherer Ebene und Native (Systemebene) und ermöglicht es dem kleinen Programm, native Funktionen über die zu verwenden API und einige Komponenten sind als native Komponenten implementiert, sodass Sie eine gute Erfahrung haben

3. Dual-Thread-Kommunikation

Fügen Sie den JS-Logikcode des Entwicklers in einen separaten Thread zum Ausführen, aber im Webview-Thread können Entwickler das DOM nicht direkt manipulieren.

Wie ändere ich die Schnittstelle dynamisch?

Wie in der Abbildung oben gezeigt, wird die Kommunikation zwischen der Logikschicht und der Ansichtsschicht von Native (WeChat-Client) weitergeleitet, und von der Logikschicht gesendete Netzwerkanforderungen werden ebenfalls von Native weitergeleitet.

Das bedeutet, dass wir das DOM durch einfache Datenkommunikation aktualisieren können.

Virtuelles DOM Ich glaube, jeder kennt es, es ist wahrscheinlich dieser Prozess: Verwenden Sie JS-Objekte, um den DOM-Baum zu simulieren –> Vergleichen Sie die Unterschiede zwischen den beiden virtuellen DOM-Bäumen –> DOM-Baum.

Wie in der Abbildung gezeigt:

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

Wenn Datenänderungen in der logischen Schicht auftreten, werden die Daten über die von der Host-Umgebung bereitgestellte setData-Methode von der logischen Schicht an Native übertragen und dann an die Rendering-Schicht weitergeleitet.

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.

Wir realisieren die Interaktion und Kommunikation zwischen der Logikschicht und der Rendering-Schicht, indem wir WXML in Daten konvertieren und über Native weiterleiten.

Ein solch vollständiges Framework kann nicht von der Basisbibliothek des Miniprogramms getrennt werden.

4. Die Basisbibliothek des Miniprogramms

Die Basisbibliothek des Miniprogramms kann für den Betrieb in die Ansichtsschicht und die Logikschicht eingefügt werden Wird in folgenden Aspekten verwendet:

In der Ansichtsschicht werden verschiedene Komponenten bereitgestellt, um die Elemente der Schnittstelle zu bilden

In der Logikschicht werden verschiedene APIs bereitgestellt, um verschiedene Logiken zu verarbeiten

Verarbeitung von Datenbindungs- und Komponentensystemen, Ereignissystemen, Kommunikationssystemen und einer Reihe von Framework-Logiken

Da die Rendering-Schicht und die Logikschicht des Applets von zwei Threads verwaltet werden, werden die beiden Threads jeweils injiziert die Basisbibliothek.

Die Basisbibliothek des Miniprogramms wird nicht in das Codepaket eines bestimmten Miniprogramms gepackt, sondern vorab in den WeChat-Client integriert.

Dies kann:

Reduzieren Sie die Codepaketgröße des Business-Applets

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

5. Exparser Framework

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

Zu den Hauptfunktionen von Exparser gehören die folgenden:

Basierend auf dem Shadow DOM-Modell: Das Modell ist dem ShadowDOM von WebComponents sehr ähnlich, verlässt sich jedoch nicht darauf Die native Unterstützung des Browsers gibt es bei der Implementierung nicht; weitere APIs wurden speziell zur Unterstützung der Programmierung kleiner Programmkomponenten hinzugefügt.

kann in einer reinen JS-Umgebung ausgeführt werden: Dies bedeutet, dass die Logikschicht auch über bestimmte Funktionen zur Organisation von Komponentenbäumen verfügt.

Effizient und leichtgewichtig: Gute Leistung, insbesondere in Umgebungen mit vielen Komponenteninstanzen, und auch die Codegröße ist gering.

Im Applet basieren alle Vorgänge im Zusammenhang mit dem Knotenbaum auf Exparser, einschließlich der Erstellung des endgültigen Knotenbaums von WXML zur Seite, des Aufrufs von createSelectorQuery und benutzerdefinierter Komponenteneigenschaften usw.

Eingebaute Komponenten

Basierend auf dem Exparser-Framework verfügt das Miniprogramm über eine Reihe integrierter Komponenten, die Ansichtscontainerklassen, Formularklassen und Navigationsklassen bereitstellen , Medienklassen, offene Klassen usw. Dutzende Komponenten. Mit einem derart umfangreichen Komponentensatz in Verbindung mit WXSS können Sie eine Schnittstelle mit beliebiger Wirkung erstellen. Auch auf funktionaler Ebene erfüllt es die meisten Anforderungen.

6. Betriebsmechanismus

Es gibt zwei Situationen, in denen das Miniprogramm gestartet wird, eine ist „Kaltstart“ und die andere ist „Heißstart“. Wenn der Benutzer bereits ein kleines Programm geöffnet hat und es dann innerhalb einer bestimmten Zeitspanne erneut öffnet, ist zu diesem Zeitpunkt kein Neustart erforderlich. Schalten Sie einfach das kleine Programm im Hintergrund in den Vordergrund. Dieser Vorgang ist ein Heißstart. Ein Kaltstart bezieht sich auf den Benutzer. Wenn das Miniprogramm zum ersten Mal geöffnet oder nach aktiver Zerstörung durch WeChat erneut geöffnet wird, muss das Miniprogramm neu geladen und gestartet werden.

Es gibt kein Konzept für einen Neustart des Miniprogramms

Wenn das Miniprogramm in den Hintergrund tritt, bleibt der Client für einen bestimmten Zeitraum im laufenden Zustand bestimmter Zeitraum (derzeit 5 Minuten) Wird von WeChat aktiv zerstört

Wenn in einem kurzen Zeitraum (5 Sekunden) mehr als zwei Systemspeicheralarme empfangen werden, wird das Miniprogramm zerstört

7. Update-Mechanismus

Wenn beim Kaltstart eine neue Version des Miniprogramms gefunden wird, wird die neue Version des Codepakets asynchron heruntergeladen und mit dem lokalen Paket gestartet des Clients gleichzeitig, d.h. die neue Version des Miniprogramms muss bis zum nächsten Mal warten. Sie wird erst nach einem Kaltstart angewendet. Wenn Sie die neueste Version sofort anwenden müssen, können Sie die wx.getUpdateManager-API verwenden, um damit umzugehen.

8. Leistungsoptimierung

Die wichtigsten Optimierungsstrategien können in drei Punkten zusammengefasst werden:

Rationalisierung des Codes und Reduzierung der Komplexität der WXML-Struktur und JS-Code ;

Verwenden Sie setData-Aufrufe sinnvoll, um die Anzahl der setData und die Datenmenge zu reduzieren

Verwenden Sie bei Bedarf die Optimierung der Unterauftragsvergabe.

1. Funktionsweise von setData

Die Ansichtsschicht des Applets verwendet derzeit WebView als Rendering-Träger, während die Logikschicht den unabhängigen JavascriptCore als laufende Umgebung verwendet. Architektonisch sind WebView und JavascriptCore unabhängige Module und verfügen über keine Kanäle für den direkten Datenaustausch. Derzeit wird die Datenübertragung zwischen der Ansichtsschicht und der Logikschicht tatsächlich über das von beiden Parteien bereitgestellte EvaluateJavascript implementiert. Das heißt, die vom Benutzer übertragenen Daten müssen in eine Zeichenfolge umgewandelt und weitergegeben werden. Gleichzeitig wird der konvertierte Dateninhalt in ein JS-Skript gespleißt und dann durch Ausführen an die unabhängige Umgebung auf beiden Seiten übergeben das JS-Skript.

Die Ausführung von „evalueJavascript“ wird von vielen Aspekten beeinflusst und die Daten, die die Ansichtsebene erreichen, erfolgen nicht in Echtzeit.

2. Häufige setData-Betriebsfehler

Häufige setData In einigen Fällen, die wir analysiert haben, setzen einige kleine Programme sehr häufig (Millisekunden) setData, was zu zwei Konsequenzen führt : Benutzer unter Android werden sich beim Gleiten festgefahren fühlen und das Betriebsfeedback wird erheblich verzögert. Da der JS-Thread kompiliert und gerendert wurde, kann er Benutzerbetriebsereignisse nicht rechtzeitig an die Logikschicht weitergeben, und die Logikschicht verarbeitet auch die Ergebnisse kann nicht rechtzeitig an die Ansichtsschicht übermittelt werden. Da der JS-Thread von WebView immer ausgelastet ist, erhöht sich die Kommunikationszeit von der Logikschicht zur Seitenschicht und die von der Ansichtsschicht empfangene Datennachricht Es sind Hunderte von Millisekunden vergangen, und die Rendering-Ergebnisse sind nicht in Echtzeit.

Aus der zugrunde liegenden Implementierung von setData wissen wir Bei unserer Datenübertragung handelt es sich tatsächlich um einen Skriptprozess zum AuswertenJavascript

. Wenn die Datenmenge zu groß ist, erhöht sich die Kompilierungs- und Ausführungszeit des Skripts, der WebView JS-Thread wird belegt und setData wird im Hintergrundstatus ausgeführt Wenn die Seite in den Hintergrundstatus wechselt (für den Benutzer unsichtbar), sollte setData die Hintergrundstatusseite nicht weiter anzeigen. Darüber hinaus verhindert die Einstellung von Daten auf der Hintergrundseite auch die Ausführung des Vordergrunds Seite.

Zusammenfassung

Die zugrunde liegende Architektur des Miniprogramms wird aus den oben genannten Perspektiven grob analysiert, vom Ursprung des Miniprogramms bis zur Entstehung von Dual-Threads, Design, Kommunikation und Grundlagen Bibliotheken, Exparser-Framework, Laufmechanismus, Leistungsoptimierung usw. sind allesamt miteinander verbundene und sich gegenseitig beeinflussende Entscheidungen. Es sollte viel mehr über das Design des zugrunde liegenden Frameworks kleiner Programme geben. Die Entstehung jedes Frameworks hat seine eigene Bedeutung. Als Entwickler können wir nicht nur dieses Tool verwenden, sondern auch seine Designmuster verstehen. Nur so können Sie sich nicht von Werkzeugen beeinflussen lassen und weiterkommen!

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Funktionsmechanismus von Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!