Wenn es um Hybrid-Apps (Hybridanwendungen) geht, ist jeder damit vertraut, da dieses Entwicklungsmodell im Laufe der Jahre viele native und Webanwendungen ersetzt hat. Warum bevorzugen Menschen dieses „Native + HTML5“-Entwicklungsmodell?
Denn einerseits berücksichtigt es bis zu einem gewissen Grad das hochwertige Erlebnis nativer Anwendungen, andererseits berücksichtigt es auch den flexiblen Entwicklungsmodus von HTML5.
Der Kern dieses Modus besteht darin, die Sprache HTML, CSS und JavaScript zum Schreiben zu verwenden und sie dann in die native Anwendung zu packen. In diesem Modus wird die Anwendung nicht im Browser des Benutzers angezeigt, sondern in der lokalen Anwendung und einem eigenen eingebetteten Browser . Läuft im Browser, der Benutzer sieht es grundsätzlich nicht. Beispielsweise verwendet eine iOS-Anwendung ein WKWebView, um unsere Geschäftsfunktionen anzuzeigen, während sie unter Android ein WebView-Element verwendet, um dieselbe Funktionalität zu erreichen.
Da der Kern der Hybrid-App jedoch darin besteht, WebView zu verwenden, um die externe Anzeige von Geschäftsfunktionen zu realisieren, muss es im Browser große und kleine Probleme geben, zumindest wird es offensichtliche Unterschiede zur Erfahrung nativer Seiten geben.
Gibt es eine Möglichkeit, den Leistungsunterschied zum Original zu verringern (oder bis zu einem gewissen Grad auszugleichen)? Darüber möchte ich heute sprechen.
Verbessern Sie die Ladegeschwindigkeit
Jeder, der Hybrid App schon einmal erlebt hat, weiß, dass das nervigste Problem das lange Laden des weißen Bildschirms ist. Der Grund dafür ist, dass die Seitenladegeschwindigkeit zu langsam ist, daher ist meine erste Sorge die Ladegeschwindigkeit.
In einer Hybrid-App ist es im Allgemeinen möglich, die Ladegeschwindigkeit zu erhöhen, indem HTTP-Anfragen reduziert, Dateien komprimiert und Caches verwendet werden.
1. Reduzieren Sie die Anzahl der HTTP
Ich möchte hauptsächlich zwei Methoden teilen: Die eine besteht darin, mehrere kleine JavaScript- oder CSS-Dateien in einer Datei zu kombinieren, um die Anzahl der Anforderungen zu reduzieren, aber auch darauf zu achten, dass beim Zusammenführen von Dateien die Dateigröße und gleichzeitige Anforderungen ausgeglichen werden müssen. Menge. Die zweite Methode besteht darin, mehrere Symbole oder Bilder in einem Sprite Sheet zu kombinieren und dann die CSS-Eigenschaft „background-position“ zu verwenden, um verschiedene Symbole anzuzeigen. Diese Methode kann auch mehrere HTTP-Anfragen für Symbole reduzieren.
2. Größe der komprimierten Datei
In Hybrid App können Sie die Größe komprimierter Dateien reduzieren, indem Sie Komprimierungstools wie ImageOptim und UglifyJS verwenden. Natürlich können Sie auch Gzip und Brotli für die Komprimierung auf der Serverseite aktivieren, wodurch auch Ressourcendateien während der Übertragung komprimiert und dadurch reduziert werden können Netzwerkübertragung. Menge.
3. Legen Sie die Cache-Richtlinie fest
Wir können eine vernünftige Caching-Strategie festlegen, und es gibt viele Caching-Strategien: Browser-Cache, Server-Cache, lokaler Cache, Cache-Löschen, Cache-Priorität usw. können alle als unsere Caching-Strategie verwendet werden. Hier nehmen wir den Browser-Caching-Mechanismus als Beispiel: Einige häufig verwendete Dateien können auf dem Gerät des Benutzers gespeichert werden, wodurch Netzwerkanfragen reduziert und die Ladegeschwindigkeit verbessert werden.
Optimieren Sie die JavaScript-Leistung
JavaScript ist die Hauptausführungsumgebung in Hybrid App, daher wirkt sich die Leistung von JavaScript auch direkt auf die Leistung der gesamten App aus.
Bei der Optimierung der JavaScript-Leistung fallen mir hauptsächlich zwei Punkte ein:
1. Reduzieren Sie DOM-Operationen
Jeder sollte wissen, dass häufige DOM-Vorgänge zu einer Neuanordnung von Reflow und Repaint führen, was sich natürlich auf die Leistung der App auswirkt. Hier werden Stapelaktualisierung und Offline-DOM empfohlen, um die Anzahl der Vorgänge zu reduzieren.
Bei der Stapelaktualisierung werden, wie der Name schon sagt, mehrere DOM-Vorgänge zu einem zusammengefasst und dann mehrere Elemente gleichzeitig aktualisiert, um die Neuanordnung und das Neuzeichnen zu reduzieren. Im Allgemeinen können Sie Fragment-Dokumentfragmente verwenden, um mehrere Elemente stapelweise hinzuzufügen und sie dann gleichzeitig in das DOM einzufügen.
Darüber hinaus können Sie auch Offline-DOM-Operationen ausprobieren, außerhalb des DOM Änderungen vornehmen und den geänderten Teil gleichzeitig zum DOM hinzufügen. Dies wird hauptsächlich durch die Verwendung von String-Splicing, Template-Engines, virtuellem DOM usw. erreicht.
2. Vermeiden Sie Speicherlecks
Ein weiterer wichtiger Punkt, auf den Sie achten sollten, ist die JavaScript-Speicherverwaltung. Um Speicherlecks im gesamten Verwaltungsprozess zu vermeiden, können wir Tools zur Überwachung der Speichernutzung verwenden, und es gibt auch einige Techniken, die beachtet werden müssen. Zum Beispiel die Reduzierung der Verwendung globaler Variablen, die manuelle Dereferenzierung von Nullen, die Vermeidung der zirkulären Verwendung von Referenzen usw.
hinten geschrieben
Natürlich ist die Leistungsoptimierung von Hybrid-Apps ein relativ komplizierter Prozess, und es gibt andere Möglichkeiten, ihn zu praktizieren. Beispielsweise ist die WebView-Optimierung ein sehr wichtiger Teil, und dieser Teil verdient es, später ausführlicher erläutert zu werden. Dieser Artikel ist zunächst falsch. Die WebView-Optimierung wurde zu häufig eingeführt.
Darüber hinaus muss erklärt werden, dass mit der kontinuierlichen Förderung der Applet-Container-Technologie auch die neue mobile Hybridanwendungsmethode „Native+ Applet“ Aufmerksamkeit erregt. Tatsächlich besteht das technische Prinzip darin, FinClip SDK in bestehende Apps einzubetten auf nicht-invasive Weise. Geben Sie der App die Möglichkeit, kleine Programme auszuführen, um sie in einen hybriden Entwicklungsmodus aus „Native + kleine Programme“ zu verwandeln. Die Erfahrung bei der Verwendung dieses Modus wird deutlich besser sein als die von „Native +“. HTML5".
Dieses Modell entspricht auch dem Trend, dass Benutzer immer mehr auf die Erfahrung bei der Verwendung verschiedener Produkte achten. Das bessere gemischte Entwicklungsmodell aus „nativen + kleinen Programmen“ wird auch von Entwicklern mehr Aufmerksamkeit und Anerkennung erhalten.
Welche anderen guten Ideen haben andere große Jungs?