Explication détaillée des points de connaissance WebView

Qu'est-ce que WebView

WebView est un navigateur de noyau webkit hautes performances intégré au téléphone mobile, un composant encapsulé dans SDK. Il n'y a pas de barre d'adresse ni de barre de navigation fournie, WebView affiche simplement une interface web. Il est souvent utilisé en développement.

ps : Pour une introduction à WebView, vous pouvez lire ici "Parler de l'utilisation de WebView"

Bien que WebView soit quelque chose de conçu dans le développement Android, en tant que développeur front-end , faites attention Certaines choses connexes sont toujours nécessaires.

Problèmes de performances

WebView est la couche inférieure du APPdéveloppement natifSDK, il doit donc y avoir des problèmes de performances, le plus souvent. intuitif Le ressenti est plus lent que le ressenti natif

APP Lors de l'ouverture d'une page, il y a les étapes suivantes

1. Initialisation de WebView. (page Pas de réponse)

2. Établir la connexion, recevoir des données, initialisation des données (page pas de réponse - vide)

3. Rendu de page, chargement de page ( Chargement de la page )

4. Afficher la page (affichage de la page)

Comme indiqué :

Initialisation de WebView

APP Il existe une différence entre charger une page Web et charger un navigateur Lorsque le navigateur est ouvert pour la première fois, le noyau du navigateur est démarré, et. APP lorsque la page web est chargée pour la première fois, la première étape consiste à créer l'WebView instance

analyse

Lors de l'APP initialisation de <.>, il sera grossièrement divisé selon les processus suivants WebView

Première initialisation : Une fois le client démarré à froid, ouvrez

pour la première fois, de la création de WebView à l'établissement de connexion réseau. WebView

Deuxième initialisation : Après l'ouverture

Après cela, quittez WebView et rouvrez-le WebView

Conclusion

En tant qu'ingénieur de développement front-end, l'heure d'ouverture de la page de statistiques est basée sur le début de la connexion réseau . Mais dans

l'utilisateur ressentira que l'heure d'ouverture. sera plus long

.WebView70~700ms

La raison pour laquelle il y a un tel résultat est :

Dans le navigateur, le navigateur peut commencer à se charger la page dès que l'on saisit l'adresse (ou même avant).
Dans le client, le client doit passer du temps à initialiser
2. avant de commencer le chargement.

   WebView

Pendant cette période, comme

n'existe pas encore, tous les processus ultérieurs sont complètement bloqués.

WebViewOptimisation

Étant donné que ce processus se produit dans le code de

, il ne peut pas être optimisé simplement en s'appuyant sur le code front-end ; la plupart des solutions sont complétées par une collaboration entre le front-end ; et le client. Ce qui suit est une solution adoptée par plusieurs industries. Méthode

nativeGlobal WebView

 :

Lorsque le client démarre pour la première fois, initialisez un

global à utiliser et masquez-le

WebViewQuand ; l'utilisateur visite

, utilisez directement ce

pour charger la page Web correspondante et l'afficher. WebViewWebView

Cette méthode peut réduire efficacement la première heure d'ouverture de

en

. Lorsque l'utilisateur accède à la page, il n'est pas nécessaire d'initialiser WebView l'heure. AppWebViewBien sûr, cela entraîne également quelques problèmes, notamment :

Consommation de mémoire supplémentaire.
Sauter entre les pages nécessite d'effacer les traces de la page précédente, ce qui facilite la fuite de mémoire.

[Se référer au brevet Neusoft - Méthode et dispositif de chargement de pages Web CN106250434A]

Demande de données d'agent client

Méthode :

Pendant l'initialisation du client
• ,

  commence à demander directement des données au réseau WebViewnative

Lorsque l'initialisation de la page est terminée ; terminé, récupère les données demandées à
• par son proxy.

  native

Bien que cette méthode ne puisse pas réduire le temps d'initialisation

, la demande de données et l'initialisation

peuvent être effectuées en parallèle, et le temps de chargement global de la page est raccourci ; le temps de chargement est raccourci Temps : WebViewWebView

[Se référer au partage Tencent : Plus de 70 % de l'activité est développée par H5 Comment optimiser et faire évoluer l'architecture du mobile QQ Hybrid ? 】

Il existe diverses autres méthodes d'optimisation. Je ne les listerai pas une par une. Elles se concentrent toutes sur deux points :

Pré-initialiser avant. utilisation. Bon
1. , réduisant ainsi la consommation de temps.

   WebView

Lors de l'initialisation, utilisez
2. pour terminer certaines requêtes réseau et autres processus, afin que l'initialisation

   ne bloque pas complètement les processus suivants. Native

Résumé de l'optimisation des performances WebView

Dans le processus de chargement d'une page Web, native, le réseau, le traitement back-end et le processeur participeront tous, et chacun a le travail nécessaire et les dépendances ; leur permettre de se traiter en parallèle au lieu de se bloquer peut accélérer le chargement de la page Web :

• WebView L'initialisation est lente, vous pouvez d'abord demander des données lors de l'initialisation. , afin que le backend et le réseau ne soient pas inactifs.

• Le traitement du back-end est lent, le serveur peut donc être divisé en trunk sorties Pendant que le back-end calcule, le front-end charge également les ressources statiques du réseau.

• Si le script s'exécute lentement, laissez-le s'exécuter à la fin sans bloquer l'analyse de la page.

• Dans le même temps, un préchargement et une mise en cache raisonnables peuvent réduire le goulot d'étranglement de la vitesse de chargement.

• WebView Si l'initialisation est lente, initialisez simplement un WebView pour l'utiliser à tout moment.

• DNS et le lien est lent, trouvez un moyen de réutiliser le nom de domaine et le lien utilisés par le client.

• L'exécution du script est lente. Vous pouvez diviser le code du framework et l'exécuter avant de demander la page.

Vous n'avez pas besoin d'en savoir trop sur WebView en développement front-end. Je pense personnellement que la compréhension de base ci-dessus du processus général est suffisante. est plus à WebView qu'à Ceux-ci.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!