Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der WebView-Wissenspunkte

零下一度
Freigeben: 2017-06-24 14:49:06
Original
2617 Leute haben es durchsucht

Was ist WebView

WebView ist ein leistungsstarker webkit Kernel-Browser, der in das Mobiltelefon integriert ist, eine in SDK gekapselte Komponente. Es gibt keine Adressleiste oder Navigationsleiste, WebView zeigt lediglich eine Weboberfläche an. Es wird häufig in der Entwicklung verwendet.

ps: Für eine Einführung in WebView können Sie hier „Sprechen über die Verwendung von WebView“ lesen

Obwohl WebView etwas ist, das in der Android-Entwicklung als Front-End-Entwickler entwickelt wurde Achten Sie darauf, dass einige verwandte Dinge noch erforderlich sind.

Leistungsprobleme

WebView sind die unterste Ebene der nativen APP EntwicklungSDK, daher muss es am häufigsten Leistungsprobleme geben intuitiv Das Gefühl ist langsamer als das native.

APP Beim Öffnen einer Seite gibt es die folgenden Phasen:

  1. WebView-Initialisierung (Seite Keine Antwort)

  2. Verbindung herstellen, Daten empfangen, Dateninitialisierung (Seite keine Antwort – leer)

  3. Seitenrendering, Seitenladen (Seite wird geladen)

  4. Seite anzeigen (Seitenanzeige)

Wie gezeigt:

Detaillierte Erläuterung der WebView-Wissenspunkte

WebView-Initialisierung

APP Es gibt einen Unterschied zwischen dem Laden einer Webseite und dem Laden eines Browsers. Beim ersten Öffnen des Browsers wird der Browserkern gestartet und APP Wenn die Webseite zum ersten Mal geladen wird, besteht der erste Schritt darin, die WebView

-Analyse

während der

-Initialisierung von , es wird grob in die folgenden Prozesse unterteilt APPWebView

Erste Initialisierung: Nachdem der Client kalt gestartet wurde, öffnen Sie
zum ersten Mal, von der Erstellung von

bis zur Einrichtung der Netzwerkverbindung. WebViewWebView

Zweite Initialisierung: Nach dem Öffnen
Danach beenden

und erneut öffnen WebViewWebView

Fazit >
Als Front-End-Entwicklungsingenieur basiert die Öffnungszeit der Statistikseite auf dem Beginn der Netzwerkverbindung. Aber in

wird der Benutzer die Öffnungszeit spüren wird länger dauern
.

WebView70~700ms Der Grund, warum es ein solches Ergebnis gibt, ist:

Im Browser kann der Browser mit dem Laden beginnen die Seite, sobald wir die Adresse eingeben (oder sogar schon vorher).
  1. Im Client muss der Client Zeit mit der Initialisierung
  2. verbringen, bevor er mit dem Laden beginnt.
  3. WebView

  4. Da
in diesem Zeitraum noch nicht existiert, sind alle nachfolgenden Prozesse vollständig blockiert.

OptimierungWebView

Da dieser Prozess im Code von

stattfindet, kann er nicht einfach dadurch optimiert werden, dass man sich auf den Front-End-Code verlässt; die meisten Lösungen werden durch die Zusammenarbeit zwischen dem Front-End vervollständigt und der Kunde. Das Folgende ist eine Lösung, die von mehreren Branchen übernommen wurde.

Global WebViewnative

Methode:

Wenn der Client zum ersten Mal startet, initialisieren Sie ein globales
zur Verwendung und blenden Sie es aus

Wann Wenn der Benutzer WebView besucht, verwenden Sie dieses

direkt, um die entsprechende Webseite zu laden und anzuzeigen.

WebViewWebViewDiese Methode kann die erste Öffnungszeit von

in
effektiv verkürzen. Wenn der Benutzer auf die Seite zugreift, muss die

-Zeit nicht initialisiert werden. WebViewAppNatürlich bringt dies auch einige Probleme mit sich, darunter: WebView

Zusätzlicher Speicherverbrauch.
  • Das Springen zwischen Seiten erfordert das Löschen der Spuren der vorherigen Seite, wodurch es leichter zu Speicherlecks kommt.
  • [Siehe Neusoft-Patent – ​​Methode und Gerät zum Laden von Webseiten CN106250434A]

Client Agent Data Request

Methode :

Während der Client initialisiert
    , beginnt
  • direkt mit der Anforderung von Daten aus dem Netzwerk

    WebViewnative

    Wenn die Seiteninitialisierung erfolgt abgeschlossen, ruft die von
  • durch seinen Proxy angeforderten Daten ab.
  • native

    Obwohl diese Methode die
  • Initialisierungszeit nicht verkürzen kann, können Datenanforderung und
Initialisierung parallel durchgeführt werden, wodurch die Gesamtladezeit der Seite verkürzt wird Die Ladezeit wird verkürzt. Zeit:

WebViewWebView[Siehe Tencent Sharing: Mehr als 70 % des Geschäfts werden von H5 entwickelt. Wie kann die Architektur des mobilen QQ Hybrid optimiert und weiterentwickelt werden? 】

Es gibt verschiedene andere Optimierungsmethoden, die ich nicht einzeln auflisten werde. Sie konzentrieren sich alle auf zwei Punkte:

Vorher initialisieren Nutzen. Gut
    , wodurch der Zeitaufwand reduziert wird.
  1. WebView

    Während der Initialisierung verwenden Sie
  2. , um einige Netzwerkanforderungen und andere Prozesse abzuschließen, damit die
  3. -Initialisierung nachfolgende Prozesse nicht vollständig blockiert.

Zusammenfassung der WebView-Leistungsoptimierung

Am Prozess des Ladens einer Webseite native sind Netzwerk, Back-End-Verarbeitung und CPU beteiligt, und jeder muss die erforderliche Arbeit leisten und Abhängigkeiten; wenn man ihnen erlaubt, sich gegenseitig parallel zu verarbeiten, anstatt sich gegenseitig zu blockieren, kann das Laden der Webseite schneller werden:

  • WebView Die Initialisierung ist langsam, Sie können während der Initialisierung zuerst Daten anfordern , damit das Backend und das Netzwerk nicht im Leerlauf sind.

  • Die Back-End-Verarbeitung ist langsam, sodass der Server in trunk Ausgaben unterteilt werden kann. Während das Back-End berechnet, lädt das Front-End auch statische Netzwerkressourcen.

  • Wenn das Skript langsam ausgeführt wird, lassen Sie das Skript am Ende laufen, ohne die Seitenanalyse zu blockieren.

  • Gleichzeitig kann ein angemessenes Vorladen und Vorcaching den Engpass bei der Ladegeschwindigkeit verringern.

  • WebView Wenn die Initialisierung langsam ist, initialisieren Sie einfach ein WebView zur jederzeitigen Verwendung.

  • DNS und der Link langsam ist, finden Sie eine Möglichkeit, den vom Client verwendeten Domänennamen und Link wiederzuverwenden.

  • Die Skriptausführung ist langsam. Sie können den Framework-Code aufteilen und ausführen, bevor Sie die Seite anfordern.

Sie müssen nicht allzu viel über WebView in der Front-End-Entwicklung wissen. Ich persönlich denke, dass das oben genannte Grundverständnis des allgemeinen Prozesses ausreicht ist mehr WebView als diese.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der WebView-Wissenspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage