Résumé de cinq années d'expérience en développement de petits programmes pour les équipes front-end de commerce électronique [plein d'informations utiles]

Toute application pouvant être écrite en JavaScript sera finalement écrite en JavaScript. De même, tout produit pouvant être implémenté à l’aide de mini-programmes sera finalement implémenté à l’aide de mini-programmes. Alors comment développer un petit programme ? L'article suivant résume et partage cinq années d'expérience en développement de petits programmes pour les équipes front-end de commerce électronique (principe de 10 000 mots + conseils d'optimisation). J'espère qu'il sera utile à tout le monde !

1. Discutez de l'architecture à double thread

Questions sur la conception sous-jacente des mini-programmes WeChat

• Qu'est-ce que le modèle à double thread exactement ?
• Comment séparer la vue et la logique ?
• Pourquoi utiliser une syntaxe étrange comme WXML et WXSS ?
• Comment bloquer l'API des opérations dangereuses ?
• Comment communiquer et comment mettre en œuvre des mises à jour de vues basées sur les données ?
• Quels sont les inconvénients du modèle dual-thread ?

1. Composition du modèle

1), problèmes avec les processus de navigateur traditionnels et les modèles de thread

Problèmes de performances

Le thread de rendu et le thread du moteur JS s'excluent mutuellement, et là sont des problèmes de blocage. L'exécution du script JS à long terme affectera directement le rendu des vues de l'interface utilisateur, provoquant des retards de page

Problèmes de sécurité

Balises HTML dangereuses (a, script) et API JS (Fonction, eval, API DOM), il est facile pour les attaquants de falsifier le contenu de la page, d'obtenir illégalement des informations sur les utilisateurs, etc.

Solution

L'applet adopte un modèle à double thread, qui sépare l'affichage de la vue et le traitement logique en deux threads

Dans le modèle HTML Les balises sont encapsulées afin que les développeurs ne puissent pas appeler directement les balises natives. Les capacités d'origine de l'API d'opération logique dangereuse dans JS sont également bloquées. Les actions de communication impliquées ne peuvent déclencher que des mises à jour virtuelles du DOM (vues basées sur les données) via l'API fournie par la couche intermédiaire. )

2), mini-programme modèle double thread

Les capacités de la couche de vue et de la couche logique sont fournies via le fichier JS de la bibliothèque de base du mini-programme intégré au client WeChat

WAWebview.js Fournit des fonctionnalités API basées sur la couche de vue, y compris un ensemble complet de systèmes de composants et d'implémentations associées de Virtual Dom

WAService.js Fournit des fonctionnalités API basées sur la couche logique, exposant les API pour diverses opérations aux développeurs

3) L'implémentation sous-jacente du moteur client

Sous différents environnements d'exploitation, l'environnement d'exécution du script et l'environnement de rendu des composants sont différents, et les performances sont également différentes :

• Sur iOS, iPadOS et Mac OS, petit Le Le code JavaScript de la couche logique du programme s'exécute dans JavaScriptCore et la couche de vue est rendue par WKWebView. L'environnement inclut iOS 14, iPad OS 14, Mac OS 11.4, etc.

• Sur Android, le code JavaScript du couche logique d'applet Fonctionnant dans V8, la couche de vue est rendue par le moteur XWeb auto-développé de WeChat basé sur le noyau Mobile Chromium (du précédent X5 au moteur XWeb auto-développé, la couche de vue est rendue basée sur Mobile Chrome noyau, et selon les divulgations officielles, la couche logique sera également séparée de la V8 à l'avenir, en utilisant des threads XWeb Worker personnalisés, c'est-à-dire en personnalisant un thread Web Worker comme couche logique du mini-programme Lien de référence)

• Sous Windows, les mini-programmes. La couche logique JavaScript et la couche vue utilisent le noyau Chromium

• Sur l'outil de développement, le code JavaScript de la couche logique de l'applet s'exécute dans NW.js, et la couche vue. est rendu par Chromium WebView

2. Couche de vue

1), système de composants de mini-programme

Il existe trois types de composants impliqués dans les mini-programmes : les composants intégrés, les composants personnalisés, les composants natifs

2), Cadre d'organisation des composants du mini programme

1 Le composant Web

Le composant Web est la capacité de créer des fonctions encapsulées et des éléments personnalisés dans le navigateur, et se compose de trois technologies principales

.

• Éléments personnalisés (éléments personnalisés) Un ensemble d'API JavaScript qui permettent de définir des éléments personnalisés et leur comportement, puis de les utiliser selon les besoins dans l'interface utilisateur

• Shadow DOM (Shadow DOM) Un ensemble de API JavaScript pour attacher une arborescence DOM « fantôme » encapsulée à un élément (rendu séparément du DOM du document principal) et contrôler ses fonctionnalités associées. Garder les fonctionnalités des éléments privées de cette façon leur permet d'être scriptés et stylisés sans crainte d'entrer en conflit avec d'autres parties du document

• Modèles HTML

modèle et emplacement Les éléments peuvent écrire des modèles de balisage qui ne sont pas affichés dans la page rendue. Ils peuvent ensuite être réutilisés plusieurs fois comme base pour des structures d'éléments personnalisées

2. Framework Exparser

Exparser est le cadre d'organisation des composants pour les mini-programmes WeChat. Il est intégré à la bibliothèque de base du mini-programme et fournit la base de divers composants de. le mini programme prend en charge. Tous les composants de l'applet, y compris les composants intégrés et les composants personnalisés, sont organisés et gérés par Exparser. Dans l'applet, toutes les opérations liées à l'arborescence des nœuds dépendent d'Exparser, y compris WXML pour la construction de l'arborescence des nœuds finale de la page. Appels createSelectorQuery et fonctionnalités de composants personnalisés, etc.

Exparser conservera les informations relatives à l'arborescence des nœuds de la page entière, y compris les attributs de nœud, les liaisons d'événements, etc., ce qui équivaut à une version simplifiée de l'implémentation de Shadow DOM

3. Fonctionnalités d'Exparser

Basé sur le modèle Shadow DOM : Le modèle est très similaire au Shadow DOM du composant Web, mais il ne repose pas sur le support natif du navigateur et n'a pas d'autres bibliothèques dépendantes ; implémentation, d'autres API sont également ajoutées pour prendre en charge la programmation de composants de petits programmes
Peut fonctionner dans un environnement JS pur : cela signifie que la couche logique possède également certaines capacités d'organisation d'arborescence de composants (utilisées dans le rendu des composants)
Efficace et léger : bonnes performances, au niveau de l'instance de composant. Les performances sont particulièrement bonnes dans plusieurs environnements et la taille du code est également plus petite
4 Méthode de base Exparser

registerBehavior

Enregistrez certains comportements de base du composant pour le composant. pour hériter

registerElement

Enregistrez le composant et interagissez avec nous Principalement des propriétés et des événements

Création de composants

La bibliothèque de base du mini programme fournit deux constructeurs, Page et Composant Lorsque le mini programme est démarré, le défini. les champs tels que les propriétés, les données, les méthodes, etc. sont écrits dans le registre des composants d'Exparser lors de l'initialisation de la page, Exparser créera une instance du composant racine de la page, et les autres composants utilisés créeront également des instances de composant en conséquence (il s'agit d'un processus récursif)

5. Le processus de création de page et de composant

De Dans l'image ci-dessus, nous pouvons clairement voir la différence dans les méthodes de communication entre le rendu de page et le rendu de composants de petits programmes. Parmi eux, la génération et la différence de VDOM dans le rendu de page sont terminées dans la couche de vue, et la couche logique est uniquement responsable de l'envoi des données pour déclencher la logique de mise à jour de la couche de rendu. Dans le rendu du composant, la couche logique et la couche vue doivent maintenir conjointement un ensemble de VDOM. La méthode consiste à créer le VDOM du composant dans la couche logique lorsque le composant est initialisé, puis à le synchroniser avec la couche vue. Les opérations de mise à jour ultérieures effectueront d'abord une comparaison des anciens et des nouveaux VDOM dans la couche logique, puis communiqueront uniquement les résultats après la comparaison et les transmettront à la couche d'affichage pour une mise à jour et un rendu directs du VDOM. Le plus grand avantage de cette procédure est de contrôler la granularité de la communication de mise à jour de la vue au niveau du DOM. Seul le DOM qui finit par changer sera mis à jour (car parfois les modifications des données n'entraînent pas nécessairement des mises à jour de la vue par rapport au précédent). Les mises à jour des niveaux de données seront plus précises, évitant ainsi des coûts de communication inutiles et offrant de meilleures performances.

3), Composants natifs du mini-programme

1 Avantages des composants natifs

• Développez les capacités du Web

  . Par exemple, les composants de la zone de saisie (saisie, zone de texte) ont la capacité de mieux contrôler le clavier.

• Meilleure expérience

  , tout en réduisant également le travail de rendu de WebView. Par exemple, le travail de rendu de composants plus complexes tels que les composants cartographiques n'occupe pas le thread WebView, mais est confié au client plus efficace pour un traitement natif.

• Meilleures performances de rendu

  , en contournant le processus setData, de communication des données et de rendu. Par exemple, les composants du canevas (canvas) peuvent être dessinés directement avec un riche ensemble d'interfaces de dessin.

2. Processus de création de composant natif

Une fois le composant créé, il est inséré dans l'arborescence DOM et un élément d'espace réservé est rendu le noyau du navigateur calculera immédiatement la mise en page. la position du composant par rapport à la page (coordonnées x, y), la largeur et la hauteur

• Le composant informe le client, et le client insère une zone native à la même position en fonction de la largeur et de la hauteur, puis le client restitue l'interface dans cette zone

• Lorsque la position ou la largeur et la hauteur changent, le composant informera Le client effectue les ajustements correspondants

3. Restrictions de rendu des composants natifs

• Certains styles CSS ne peuvent pas être appliqués aux composants natifs

• Problèmes de niveau (les composants natifs sont le niveau le plus élevé et couvriront les composants dans la couche WebView)

Solution

• Utiliser les composants de vue de couverture et d'image de couverture pour couvrir les composants natifs (capacités limitées, peu flexibles)

• Rendu sur la même couche (rendre les composants natifs directement sur le même niveau de WebView via certains moyens techniques (ci-dessus)

4), rendu sur la même couche du composant natif

1 principe de mise en œuvre du système iOS

Le rendu sur la même couche du côté iOS de l'applet est implémenté en fonction. sur WKChildScrollView. Le composant natif sera directement monté sur le préréglage après avoir été attaché. Sous le conteneur WKChildScrollView créé,

Principle Analysis

WKWebView utilise une approche en couches pour le rendu en interne. dans un composant WKCompositingView sur iOS, mais il n'y a pas de mappage un-à-un entre la couche de composition et les nœuds DOM (le noyau fusionne généralement plusieurs nœuds DOM en une seule couche de composition).

WKChildScrollView : Lorsque la propriété CSS d'un nœud DOM est définie sur overflow: scroll (les versions inférieures doivent définir -webkit-overflow-scrolling: touch en même temps), WKWebView générera un WKChildScrollView pour celui-ci (afin pour l'autoriser sur iOS, le défilement WebView offre une expérience plus fluide. Le défilement dans WebView est en fait effectué par un véritable composant de défilement natif (le noyau WebKit a déjà traité la relation hiérarchique entre celui-ci et les autres nœuds DOM), et il existe une paire de WKChildScrollView. et les nœuds DOM. Une relation de mappage.

Processus de création

• Créer un nœud DOM et définir ses propriétés CSS sur overflow : scroll et -webkit-overflow-scrolling : touch

• Notifier le client pour trouver le natif correspondant au DOM nœud Le composant WKChildScrollView

• monte le composant natif sur le nœud WKChildScrollView

• Grâce au processus ci-dessus, le composant natif de l'applet est inséré dans le principe de mise en œuvre du système Android WKChildScrollView

2.

WebPlugin est un mécanisme de plug-in dans le noyau du navigateur. Le rendu sur la même couche du côté Android du mini-programme est implémenté sur la base de la balise embed et de la balise WebPlugin

Analyse des principes

embed. une nouvelle balise en HTML5, qui permet de définir l'intégration. Le contenu (tel que les plug-ins, les médias, etc.) peut être au format PDF, Midi, Wav, MP3, etc. Par exemple, l'aperçu PDF sur le Le navigateur Chrome est basé sur la balise embed.

Réalisé sur la base de la balise embed combinée à l'extension du noyau Chromium. Chromium prend en charge le mécanisme WebPlugin. WebPlugin est un mécanisme de plug-in du noyau du navigateur. Il est principalement utilisé pour analyser et décrire la balise embed et restituer les composants natifs dans le navigateur. Texture fournie par le noyau.

Processus de création

• Créez un nœud DOM intégré côté WebView et spécifiez le type de composant

• Le noyau Chromium créera une instance WebPlugin et générera un RenderLayer.

• Le client Android initialise un composant natif correspondant

• Le client Android dessine l'image du composant natif sur la SurfaceTexture liée au RenderLayer créé à l'étape 2

• Notifie le noyau Chromium pour restituer le RenderLayer

• Chromium restitue le nœud d'intégration et l'affiche à l'écran

5), affichez la compilation du code de couche

Les outils de développement WeChat ont un compilateur de fichiers de code binaire WXML et WXSS intégré. Le compilateur accepte WXML et. Le fichier de code WXSS répertorie et génère le code JavaScript une fois le traitement terminé. une méthode de conversion pour ajouter l'unité de taille rpx, qui peut être calculée de manière adaptative en unités px en fonction de la largeur de l'écran de l'appareil

Provide la méthode setCssToHead pour ajouter le contenu CSS converti à l'en-tête du modèle html

méthode d'évaluation pour exécuter cette chaîne de fichier JS pour terminer l'injection de style

2. Fichier de code WXML

Processus d'exécution de l'outil de commande WCC

• wcc compile WXML pour générer un produit de fichier JS

• Le fichier JS contient la méthode $gwx, qui reçoit le WXML. chemin du fichier après l'exécution. Générez la méthode generateFunc et déclenchez l'événement generateFuncReady

• La méthode generateFunc accepte les données dynamiques, similaires à une fonction de rendu, utilisées pour générer un dom virtuel

3.

1), couche logique Contient du contenu

• Fournit un environnement d'exécution de code JS

• Ajoute une interface de module nécessitant une définition pour l'objet fenêtre

• Fournit une page, une application, getApp et d'autres interfaces

• Fournit des méthodes API sous wx objet global, réseau, média, fichiers, cache de données, emplacement, appareil, interface, informations sur le nœud d'interface et certaines interfaces ouvertes spéciales

2), environnement d'exécution de code JS

Composition JSCore (iOS, Android)

1. JSVirtualMachine

Il exécute le code JS en instanciant un environnement de VM Si vous avez plusieurs JS à exécuter, vous devez instancier plusieurs VM. Et il convient de noter que ces machines virtuelles ne peuvent pas interagir les unes avec les autres, car des problèmes GC sont susceptibles de se produire

2 JSContext

JSContext est l'objet contextuel pour l'exécution du code JS, qui est équivalent à l'objet fenêtre dans une vue Web. . Dans la même VM, vous pouvez transmettre différents Context

3, JSValue

Similaire à WASM, JsValue sert principalement à résoudre le mappage mutuel entre les types de données JS et les types de données Swift ou Java. En d'autres termes, tout contenu monté dans JSContext est de type JSValue et Java implémente automatiquement la conversion de type entre JS et JS en interne. 4. JSExport est utilisé pour exposer l'interface native dans le protocole JSCore. Pour faire simple, il convertira directement les propriétés et méthodes liées au natif en méthodes et propriétés sur l'objet prototype

3 Implémentation des spécifications du module

Définir un module via définir, ce qui limite les autres choses que le module peut utiliser pour. modules, tels que fenêtre, document, etc., la méthode de définition est implémentée en stockant toute la logique du code JS dans des variables globales sous la forme de paires clé-valeur "chemin-module".

Utilisez require pour appliquer un module. module, seuls require, module et exports seront transmis. Les autres variables lues dans le code ne seront pas définies. C'est également la raison pour laquelle certains objets de l'environnement du navigateur ne peuvent pas être obtenus dans le mini programme

• Ceci. est en fait une idée typique de chargement de module, qui est très similaire à la façon dont Webpack emballe les modules

4 Principe de communication

En plus de fournir la base de la couche de vue et de la couche logique, les fichiers WAWebview.js et WAService.js sont également fournis. les capacités de l'API, il offre également la possibilité de communiquer entre les deux threads

La communication entre la couche logique de l'applet et la couche de rendu sera relayée par Native (client WeChat), et les requêtes réseau envoyées par la couche logique seront également transmis par Native

1), implémentation sous-jacente

• Les différentes implémentations de plusieurs extrémités seront éventuellement encapsulées dans une couche de compatibilité telle que WeiXinJSBridge que les développeurs pourront appeler

1 La couche d'affichage côté iOS

se fait par fenêtre. webkit.messageHandlers.NAME de WKWebView .postMessage et implémentation d'évaluation. La couche logique consiste à injecter une méthode native globale dans le framework JavaScriptCore

2 Le côté Android

Les principes d'implémentation de la couche vue et de la couche logique sont les mêmes. Ils sont implémentés en injectant une méthode native WeixinJSCore dans. l'objet fenêtre de WebView. Ce WeixinJSCore est l'interface WeChat (implémentation native) fournie pour les appels JS

3 Outils de développement WeChat

Utilisez Websocket pour la communication

2), l'objet module WeixinJSBridgeWeixinJSBridge fournit la couche de vue JS et. Natif, couche de visualisation et couche logique Le mécanisme de communication de messages entre eux fournit les méthodes suivantes :

invoke : JS appelle l'API native

5. s d'architecture double thread et optimisation

1) Les défauts de l'architecture à double thread

ne peuvent pas faire fonctionner le DOM de manière flexible et ne peuvent pas obtenir des effets plus complexes

Certaines vues liées aux composants natifs ont des restrictions d'utilisation, telles que scrollView de WeChat ne peut pas avoir de zone de texte

La taille de la page et le nombre de pages ouvertes sont limités

Nécessite un développement et une adaptation séparés, ne peut pas réutiliser les ressources de code existantes

Lorsque le volume JS dans JSCore est relativement important, son temps d'initialisation sera affecté

Lors de la transmission des données, la consommation de temps de sérialisation et de désérialisation doit être prise en compte
2), ainsi que l'optimisation de l'architecture à double thread

• Le goulot d'étranglement des performances causé par les doubles threads est également un problème clé que WeChat lui-même s'est engagé à résoudre . Comme mentionné précédemment, l'applet remplacera l'implémentation de la couche logique par un thread XWeb Worker personnalisé en modifiant le noyau Chromium dans le nouveau noyau XWeb, ce qui éliminera le besoin de V8 supplémentaire et augmentera considérablement l'utilisation de la mémoire. De plus, comme il est basé sur le thread Worker du noyau Chromium, en ce qui concerne la communication de données, il est naturel d'avoir la capacité de PostMessage de remplacer la méthode de communication sous-jacente setData d'origine pour obtenir des capacités de communication plus performantes

• 3) . L'architecture dual-thread de l'applet Alipay
• De plus, j'ai également découvert et étudié l'implémentation sous-jacente de l'applet Alipay. L'applet Alipay utilise également un modèle d'architecture à double thread similaire. En utilisant le noyau de navigateur fourni par UC, la couche de rendu s'exécute dans le thread Webview et la couche logique démarre un thread séparé pour exécuter Service Worker. Cependant, le Service Worker doit communiquer avec le thread de rendu via l'API MessageChannel. Lorsque la quantité de données est importante et que les objets sont complexes, il existe également des goulots d'étranglement en termes de performances.
  Par conséquent, l'applet Alipay a repensé la machine virtuelle JS V8 existante et a proposé un modèle d'isolation optimisé (Optimized isolation model, OIM). L'idée principale de l'OIM est de partager des données et une infrastructure dans des instances de machines virtuelles JS qui n'ont rien à voir avec l'environnement d'exécution des threads, ainsi que des objets JS immuables ou immuables, de sorte que tout en conservant l'isolement logique de la couche JS, la mémoire peut être économisée dans des scénarios multi-instances et une surcharge de consommation d'énergie. Bien que certaines données partagées entre les instances entraînent une surcharge de synchronisation, dans le modèle d'isolation, les données, les objets, le code et l'infrastructure de machine virtuelle partagés par cette solution sont immuables ou non volatiles, de sorte que la concurrence se produit rarement.
• Dans le nouveau modèle d'isolation, l'instance V8 dans Webview est un runtime local, et l'instance V8 dans le thread Worker est également un runtime local. Lorsque la couche logique et la couche de rendu interagissent, l'objet setData sera directement créé dans le. Tas partagé. Par conséquent, le moteur d'exécution local de la couche de rendu peut lire directement l'objet et l'utiliser pour le rendu de la couche de rendu, ce qui réduit la sérialisation et la transmission réseau de l'objet et améliore considérablement les performances de démarrage et de rendu.
  De plus, l'applet Alipay implémente l'optimisation de la mise en cache hors ligne de la page d'accueil. Elle restitue d'abord la page d'interface utilisateur de la page d'accueil enregistrée la dernière fois, affiche la page d'accueil à l'utilisateur, puis continue de charger le framework frontal et le code métier en arrière-plan. une fois le chargement terminé, il est fusionné avec l'interface utilisateur de la page d'accueil mise en cache hors ligne pour montrer aux utilisateurs une page d'accueil dynamique. Ceci est très similaire à la solution de mise en cache de rendu initiale de l'applet WeChat et est plus radicale. La technologie WebAssembly a également été utilisée pour réimplémenter le code de base du DOM virtuel et améliorer le rendu des pages du mini programme. [Tutoriels vidéo associés recommandés :
front-end web
• ]

6. Réflexions sur la conception d'architecture de modèle à double thread

L'architecture technique est née pour résoudre des problèmes. Une bonne solution technique n'exige pas seulement que les concepteurs améliorent l'efficacité du développement et. coût technique, expérience en matière de performances et sécurité du système, il doit également être étroitement intégré aux tendances commerciales, aux formes de produits et aux demandes des utilisateurs

2. Un examen plus approfondi du mécanisme d'exécution

1. Téléchargement du package de code

Lorsque le mini-programme démarre (démarrage à froid), WeChat affichera une interface de démarrage fixe pour le mini-programme, qui contient l'icône, le nom et l'icône d'invite de chargement du mini-programme

À ce moment, WeChat effectuera plusieurs choses dans les coulisses Travail : Téléchargez le package de code du mini-programme, chargez le package de code du mini-programme et initialisez la page d'accueil du mini-programme

Du point de vue du développeur, contrôler la taille du package de code permet de réduire le temps de démarrage du mini-programme. Pour les packages de code inférieurs à 1 Mo, le temps de téléchargement peut être contrôlé entre 929 ms (iOS), 1500 ms (Android) dans le

plan d'optimisation

• réduire la taille du package principal et du sous- package

• Règles d'allocation rationnelle, de sous-traitance et de préchargement

• Répartition fine, sous-traitance asynchrone

2. Préparation au niveau de la page

Avant le lancement du mini programme, WeChat préparera un niveau de page à l'avance. la page d'accueil du mini programme. Chaque fois qu'un niveau de page est utilisé pour afficher une page, WeChat commencera à préparer un nouveau niveau de page à l'avance, de sorte que chaque fois que wx.navigateTo est appelé, une nouvelle page puisse être affichée dès que possible. Le contenu de la page de la couche de vue est généré via le modèle pageframe.html

Étapes de préparation pour le niveau de la page

• La première étape consiste à démarrer une WebView sur les systèmes iOS et Android, le démarrage du système d'exploitation WebView prend un court laps de temps

• La deuxième étape consiste à initialiser la bibliothèque de base dans WebView. À ce stade, une optimisation interne de la bibliothèque de base sera également effectuée pour améliorer les performances de rendu des pages

• .

  La troisième étape consiste à injecter la structure WXML de l'applet et le style WXSS, afin que le mini programme puisse commencer le rendu de la page immédiatement après avoir reçu les données initiales de la page (cette étape ne peut pas être exécutée avant le démarrage du mini programme)

3. Injection et exécution du code de la page

1), Initialiser les variables globales

Afficher les variables globales de la couche

• __wxConfig : est un objet de configuration généré en fonction de la configuration globale et de la configuration de la page, y compris la page. , page sous-traitée, barre d'onglets et autres informations
• __wxAppCode__ : code développeur de type non-JS
• JSON : contenu du fichier de configuration JSON
• WXML : Le résultat de l'exécution de la fonction $gwx est une fonction exécutable, qui renverra un objet VDOM après exécution.
• WXSS : eval Le résultat de l'exécution de la fonction de style est une fonction exécutable. Insérez ensuite la balise de style

Variables globales de la couche logique

• __wxConfig : similaire à la couche de vue, n'inclut pas la page sous-traitée, barre de tabulation et autres informations
• __wxAppCode__ : similaire à la couche de vue, ne contient pas de données de type WXSS
• __wxRoute : Utilisé pour pointer vers le chemin de la page en cours de chargement
• __wxRouteBegin : Utilisé pour marquer l'enregistrement correct de la page
• __wxAppCurrentFile__ : utilisé pour pointer vers le fichier JS en cours de chargement
• __wxAppData : l'objet de domaine de données de chaque page du mini programme
• Component : constructeur de composant personnalisé
• Behavior : constructeur de comportement de composant personnalisé
• definePlugin : constructeur de composant personnalisé plug-in
• global : Objet global
• WeixinWorker : Constructeur multithread

2), bibliothèque de base et injection de fichiers Code JS métier

Voir l'injection de code de couche

1. Injecter et exécuter wxml.js fichier (définir la méthode $gwx)
2. Injecter et exécuter le fichier wxss.js (méthode eval, ajouter le fichier de style app.wxss)
3. Ajouter la variable __wxAppCode__
4. Exécuter la méthode eval, insérer la page actuelle et référencer les fichiers de style des composants
5. Exécutez $gwx (chemin de la page actuelle), renvoyez la méthode correspondante pour générer un DOM virtuel

Injection de code de couche logique

1. Injectez et exécutez des fichiers JS (ordre : autre, babel, composant, page, application)
2. Injecter et exécutez le fichier wxml.js (définissez la méthode $gwx)

Injectez à la demande et injectez lorsqu'il est utilisé

Normalement, lorsque le mini-programme est démarré, tous les codes JS du sous-package et du package principal (sauf indépendant sous-packages) où se trouve la page de démarrage seront fusionnés et injectés. À partir de la version 2.11.1 de la bibliothèque de base, l'injection à la demande et l'injection chronophage sont configurées. L'applet injecte uniquement les composants personnalisés et le code de page requis par la page actuelle qui ne seront pas utilisés dans la page. ne sera pas utilisé Chargement et initialisation

3), exécution du code métier de la couche logique

4, communication de données et rendu de vue

1), rendu initial de la page

communication de données

. dans le mini programme Lors du démarrage ou de l'ouverture d'une nouvelle page, les données initiales (données) et le chemin ainsi que d'autres informations associées seront envoyés de la couche logique à la couche de vue pour le rendu initial de la couche de vue.

La couche native transmettra ces données directement à la couche de vue et présentera un nouveau niveau de page à l'utilisateur. La couche de vue dessinera l'interface sur ce niveau de page.

Une fois que la couche de vue a reçu les données pertinentes, elle sélectionne la structure WXML appropriée en fonction du chemin de la page. La structure WXML est combinée avec les données initiales pour obtenir le premier résultat de rendu de la page

Après avoir terminé le rendu. injection de code de couche de vue et collecte Après avoir reçu les données initiales envoyées par la couche logique, combinées avec la structure de la page et les informations de style obtenues à partir des données initiales et de la couche de vue, le cadre du mini-programme restituera la page d'accueil du mini-programme, affichera le premier écran du mini programme et déclenchez l'événement onReady sur la page d'accueil.

Si le Cache de rendu initial est activé, le premier rendu peut être effectué directement en utilisant les données mises en cache de la couche de rendu, sans compter sur les données initiales de la couche logique, réduisant ainsi le temps de démarrage (l'événement onReady est exécuté dans avance).

Le temps d'initialisation de la page est grossièrement composé de deux parties : le temps initial de communication des données de la page et le temps de rendu initial. Parmi eux, le temps de communication des données fait référence au temps écoulé entre le début de l'organisation des données au niveau de la couche logique et la fin de la réception complète par la couche de visualisation. Lorsque le volume de données est inférieur à 64 Ko, le temps total peut être contrôlé dans les 30 ms.

Le temps de transmission est généralement positivement corrélé à la quantité de données. La transmission de données trop volumineuses augmentera considérablement ce temps. Par conséquent, Réduire la quantité de données transmises est un moyen efficace de réduire le temps de transmission des données.

Rendu initial

Le rendu initial se produit lorsque la page vient d'être créée. Lors du rendu initial, les données initiales sont appliquées au fragment WXML correspondant pour générer une arborescence de nœuds. L'arborescence des nœuds est la structure arborescente de la page vue dans le panneau WXML des outils de développement. Elle contient des informations telles que les noms, les valeurs d'attribut, les fonctions de rappel d'événement et d'autres informations sur tous les nœuds de composants de la page. Enfin, en fonction de chaque nœud contenu dans l'arborescence des nœuds, chaque composant est créé séquentiellement sur l'interface. Les données et l'arborescence de nœuds actuelle obtenues lors du rendu initial seront conservées pour le nouveau rendu.

Dans l'ensemble de ce processus, le temps nécessaire est généralement proportionnel au nombre total de nœuds dans l'arborescence des nœuds. Par conséquent, Réduire le nombre de nœuds dans WXML peut réduire efficacement le temps nécessaire au rendu initial et au nouveau rendu et améliorer les performances de rendu.

2) Mettre à jour le rendu des données

Une fois le rendu initial terminé, la couche de vue peut effectuer des mises à jour de l'interface après que le développeur a appelé setData.

Principe de setData

1. Modifiez la valeur du this.data correspondant (fonctionnement synchrone)

Analysez le nom de l'attribut (y compris les symboles de chemin de données tels que . et []), renvoyez la structure hiérarchique correspondante et modifier les données locales correspondantes La valeur de

{abc: 1} 中 abc 属性名 => [abc]
{a.b.c: 1} 中 'a.b.c' 属性 => [a,b,c]
{"array[0].text": 1} => [array, 0, text]

2. Envoyer les données de la couche logique à la couche de vue (fonctionnement asynchrone)

evaluateJavascript : Les données transmises par l'utilisateur doivent être converties sous forme de chaîne et transmises à en même temps, et le contenu des données converties est fusionné en un seul. Un script JS est ensuite transmis aux environnements indépendants des deux côtés en exécutant le script JS. Lors du nouveau rendu, la couche logique fusionne les données setData en données et. la couche de rendu applique les données et les données setData au fragment WXML pour obtenir une nouvelle arborescence de nœuds. Comparez ensuite la nouvelle arborescence de nœuds avec l'arborescence de nœuds actuelle, afin de savoir quels nœuds doivent être mis à jour et quels nœuds doivent être ajoutés ou supprimés. Enfin, l'ancienne arborescence de nœuds est remplacée par la nouvelle arborescence de nœuds pour le prochain rendu.

Lors de la comparaison de l'arborescence de nœuds actuelle et de la nouvelle arborescence de nœuds, les attributs de nœud affectés par les données setData seront comparés. Par conséquent, la suppression des données d'ensemble inutiles et la réduction de la quantité de données dans setData contribueront également à améliorer les performances de cette étape.

3), communication des événements utilisateur

La couche de vue acceptera les événements utilisateur, tels que les

événements de clic, les événements tactiles, etc.

La communication des événements utilisateur est relativement simple. Lorsqu'un événement utilisateur est déclenché et qu'un écouteur d'événement associé doit être déclenché, la couche de visualisation renvoie les informations à la couche logique.

Comme ce processus de communication est asynchrone, un certain retard se produira. Le temps de retard est également positivement lié à la quantité de données transmises. Lorsque la quantité de données est inférieure à 64 Ko, elle sera inférieure à 30 ms.

Il existe deux manières principales de réduire la latence

Supprimer les liaisons d'événements inutiles (bind et catch en WXML), réduisant ainsi la quantité et le nombre de données de communication

• Lors de la liaison d'événements L'ensemble de données de la cible et currentTarget doit être transmis, donc ne placez pas de données trop volumineuses dans l'attribut de préfixe de données du nœud

三、小程序基建和优化方案实践

1、小程序性能优化

1）、代码分包

1、合理的分包和分包预加载策略

主包内容

Tab页（系统要求）、业务必要页面（错误兜底页、登陆授权页等），其余文件都以业务模块或者页面的维度，拆分成各自的分包

分包预加载

据用户的实际使用场景，预测下一跳的页面，将可能性最高的场景设置为预加载分包（可以参照业务埋点数据），例如：进入电商首页后，需要对会场和商详页的分包进行预加载

2、组件分包分发

实现思路

小程序不支持主包引用分包代码，只能在分包中引用主包代码，所以把公共使用的组件代码放在主包目录中，但这些公共组件未必在主包所属的页面中会被引用，可能只是在分包页面中被多次引用，这样使得主包中代码体积越来越大，用户首次加载速度变慢。

将主包页面不依赖的公共组件分别分发到依赖它们的分包目录中，虽然分包各自的体积会有所增大，但主包体积会有显著下降

实现原理

将所有需要分发的组件放置主包指定目录中，并添加配置文件，说明组建文件分发信息。在开发时用 gulp 任务监听单个文件变化、在构建时递归遍历所有组件，将其复制到配置文件中指定的子包路径目录中。

目标文件在复制之前，都先要将文件内的依赖路径进行更新，使其在子包中运行时也能引用成功。针对不同类型的文件，采取不同的依赖分析手段。

• JS 文件：使用 babel.transformFile 修改依赖引用地址

• WXSS 文件：使用 postcss.plugin('transform-wxss') 处理依赖的 @import 导入样式文件地址

• WXML 文件：使用 require('htmlparser2').Parser 来转换内部 wxs、template（import 和 include 导入）依赖的引用地址

异步分包

小程序基础库版本 2.17.3 及以上开始支持分包异步化，即可以在分包之间互相引用，这个能力可以快速取代我们自己的组件分发方案，而且优化效果更佳，可以将分包中公共依赖的代码部分打成新的分包，在使用时异步按需引入，能力与 Web 端的异步组件类似，但这个方案在生产环境的稳定性有待验证。

2）、setData 优化

实现思路

合并 setData 调用，将其放在下个时间片（事件循环）统一传输，降低通信频率

实现原理

需要先将逻辑层 this.data 进行更新，避免前后数据不一致造成逻辑出错。将需要传送至视图层的 data 进行整合，在 nextTick 中调用原生的 setData 统一进行传送，可以有效降低通信频率，并且在传送前手动做一次与 this.data 的 diff 操作，降低通信体积

1. 降低频率

const nextTick = wx.nextTick ? wx.nextTick : setTimeout; // 小程序里的时间片 API

2. 减少体积

参考京东 Taro 中 diff 的实现，对基本、数组、对象等不同类型进行处理，最终转换为 arr[1]、x.y 这样的属性路径语法，减少传输信息量

3）、Storage API 重封装

实现思路

onLaunch、onLoad 等生命周期函数中存在大量对微信 Storage 的同步调用（使用 Sync 结尾的API），这些操作涉及JS与原生通信，同步等待耗时过久，推迟页面 onReady 触发即用户可交互时间，影响用户体验。直接改为异步操作又存在业务代码改动量较大的问题，存在一定风险，大量的异步回调代码语义不优雅、可读性较差。因此需要对原生 Storage 操作进行重封装，改为对内存中对象的实时存取，提高响应速度，并定期调用原生 API 向真实 Storage 中同步。

实现原理

Encapsulez les API avec des méthodes d'appel cohérentes, avec getStorage et getStorageSync comme API de base. Lorsqu'elle est appelée pour la première fois, l'API native est déclenchée pour obtenir les données d'origine. Après l'avoir obtenue, elle est stockée dans un objet mémoire. (suppression, modification et recherche) sont basés sur cet objet. Les opérations de définition et de suppression doivent marquer les données correspondantes comme étant sales et les stocker dans une table sale afin que les modifications puissent être synchronisées ultérieurement avec la fin native. L'appelant doit appeler régulièrement la méthode de synchronisation des modifications pour conserver les données (parcourir les données dans la table sale synchronisée) afin d'éviter toute perte accidentelle de données lorsque la mémoire est en cours d'exécution. Généralement, elle doit être exécutée régulièrement (onShow de l'application exécute setInterval). et exécuté dans le cycle de vie onHide de l'application.

Non seulement nous avons réencapsulé l'API de stockage, mais nous avons également adopté une approche similaire pour d'autres API de synchronisation qui prennent beaucoup de temps (telles que l'API getSystemInfo/getSystemInfoSync utilisée pour obtenir des informations sur les appareils et le système, l'implémentation sous-jacente est synchrone ), l'API système est appelée uniquement lors de la première acquisition et le résultat est mis en cache en mémoire, et les appels suivants renvoient directement les informations mises en cache.

4), Prélecture des données

1. Méthode de publication et d'abonnement

Idée d'implémentation

Avant de passer de la page A à la page B, émettre un message sur la page A déclenche la demande d'interface de données de la page B et met en cache les données de résultat. , lorsque la page B est ouverte, récupérez d'abord le cache. Si l'interface ne peut pas être récupérée, appelez à nouveau l'interface

Principe de mise en œuvre

Bien que la page B n'ait pas été instanciée, la page a été enregistrée, et le code externe de la page a été exécuté. Par conséquent, la publication et l'abonnement des messages peuvent être complétés avec la page A à l'avance

2 Méthode de variable d'enregistrement globale

Idée d'implémentation

Lorsque la page qui doit être préchargée est. non enregistré dans le package principal ou de manière asynchrone, il ne peut pas être effectué via le mode de publication et d'abonnement, nous pouvons y parvenir en enregistrant globalement la méthode de préchargement

Principe de mise en œuvre

Initier une pré-demande lorsque le l'itinéraire de la page précédente saute, enregistrez cette requête dans une variable globale Promise, et lorsqu'il est nécessaire de pré-demander. Lorsque la page chargée est rendue pour la première fois, la priorité est donnée à la récupération du résultat des données dans la variable globale Promise puis au rappel

5), optimisation de la mémoire

1, optimisation de l'image

Optimiser les ressources globales de l'image (fonction Alibaba Cloud)

• Taille : 1 à 2 fois la largeur et la hauteur réelles
• Format Webp : Entièrement utilisé du côté Android
• Format Png : Utilisé uniquement dans les scènes avec de fortes demandes de fonds transparents, le reste utilise Jpg/Jpeg par défaut
• images Chargement paresseux : Activez l'attribut lazy-load du composant Image

2. Rétrogradation de la machine bas de gamme

Idées de mise en œuvre

Selon le niveau de performance matérielle du modèle utilisateur, l'affichage frontal définit différentes stratégies de rendu

Principe de mise en œuvre

Rétrograder les fonctions suivantes en bas -scénarios de machine de fin

• les animations gif sont rétrogradées en images statiques
• Les animations JS et CSS sont rétrogradées en styles statiques
• Ne pas afficher le composant swiper
• Utiliser une qualité de 60%

3. Optimisation de la longue liste

• RecycleView
• IntersectionObserver

2. Mini-ingénierie de programme

1), framework de plug-in

outil de framework

BeautyWe est une mini-entreprise de programme à trois carrés. Le cadre de développement encapsule le public sous-jacent. logique métier de la vie

Scénarios d'application

Logique métier publique, telle que la vérification du statut de connexion de l'utilisateur sur chaque page, l'acquisition et le traitement des paramètres d'URL, l'enfouissement automatique des PV, la surveillance des performances, etc.

Principe de mise en œuvre

La fonction de cycle de vie est un plug-in, et les fonctions natives onLoad, onShow, onReady et autres sont réécrites à l'aide d'Object.defineProperty pour former une chaîne de tâches Promise en interne. En introduisant des plug-ins, la chaîne de tâches est des méthodes qui peuvent être insérées librement. dans les positions médiane et avant, qui sont déclenchées et appelées séquentiellement lorsque la fonction de cycle de vie du système est exécutée.

Après avoir implémenté le plug-in du hook de cycle de vie, nous pouvons encapsuler toutes sortes de logiques publiques sous-jacentes qui doivent être traitées et l'insérer dans la chaîne de tâches Promise de l'hôte (cycle de vie natif)

2), déploiement automatisé

Un ensemble d'outils de construction et de déploiement de mini-programmes semi-automatiques est implémenté sur la base du mini-programme CI + Gitlab CI + Puppeteer Pour plus de détails, veuillez consulter mon autre article"Déploiement automatisé du mini programme WeChat. Solution", le mini-programme WeChat fournit plus tard miniprogram-ci qui peut être exécuté indépendamment dans l'environnement Linux, qui est plus simple et plus facile à utiliser.

3), surveillance des points cachés

Capacités de surveillance

• Points cachés de l'entreprise (Points cachés de l'entreprise tels que le PV de la page, l'exposition du module, etc.)

• Rapport de performance (mini démarrage du programme, rendu de page, FMP, alarme de mémoire)

• Surveillance des exceptions (erreur JS, erreur d'interface, erreur commerciale)

Type de rapport de surveillance des performances

• memory_warning : données d'alarme de mémoire rapport. Méthode de collecte : collectez les niveaux d'alarme dans le rappel wx.onMemoryWarning

• app_launch : rapport sur les données d'exécution de l'application. Méthode de collecte : enregistrez le temps d'exécution du cycle de vie de l'application (onLaunch, onShow) et signalez-le lorsque la page est onLoad

• page_render : rapport sur les données d'exécution de la page. Méthode de collecte : enregistrez le temps d'exécution du cycle de vie de la page (onLoad, onShow, onReady), FMP, etc., et signalez-le lorsque la page est onHide ou onUnload

Principe de mise en œuvre

Basé sur le framework de plug-in solution, la fonction de hook de cycle de vie Après la réécriture, vous pouvez automatiquement enregistrer et rapporter les données de performances pendant l'exécution du programme de page

3. Mise en œuvre de l'optimisation des performances et spécifications d'itération quotidiennes

Nous utilisons FMP comme indicateur clé pour mesurer le deuxième taux d'ouverture. Pour plus de détails, veuillez me contacter. Un autre article de Optimisation des performances frontales centrée sur l'expérience utilisateur. De plus, dans le cadre du développement quotidien, nous avons également développé certaines spécifications qui peuvent améliorer la garantie de base de performances et de stabilité dans les itérations commerciales quotidiennes. Pour plus de détails, voir Règles militaires de développement de programmes WeChat Mini.

4. Réflexions récapitulatives et perspectives de développement

Les capacités de l'infrastructure s'améliorent constamment

La divulgation continue de la technologie sous-jacente du cadre dans les documents officiels montre que la construction technologique des petits programmes devient de plus en plus mature et parfaite. Avec l'enrichissement continu de l'écosystème de l'infrastructure, les responsables ont successivement pris en charge ces capacités, notamment le rendu sur la même couche, la surveillance de l'environnement réseau, la mise en cache du rendu initial et l'optimisation des performances de démarrage, rapprochant ainsi les mini-programmes de l'écosystème Web.

Dans notre propre itération commerciale, afin de résoudre divers problèmes, nous avons créé nous-mêmes de nombreuses roues, telles que : la sous-traitance et l'asynchronisation, le packaging CI et l'API de performance. WeChat implémentera plus tard ces fonctionnalités de manière native. Cela peut sembler un effort inutile, mais en fait, cela montre simplement que ce que nous avons fait dans le passé est correct et que la direction est cohérente avec le développement de l’ensemble de l’écosystème.

Plus de scénarios renforcent les entreprises

En plus de l'amélioration des capacités techniques, l'écosystème des mini-programmes WeChat enrichit également constamment la prise en charge des capacités dans davantage de scénarios commerciaux, tels que la prise en charge de mini-programmes pour partager des Moments, la prise en charge de la génération de courts liens, le matériel de discussion WeChat ouvre un mini programme pour offrir plus de possibilités et d'imagination à notre entreprise.

WeChat a également lancé un cadre matériel de mini-programme, qui permet aux périphériques matériels (appareils informatiques non généraux) d'exécuter des mini-programmes WeChat sans les conditions nécessaires pour exécuter le client WeChat. Il peut être utilisé sur les tablettes Android, les appareils à grand écran, etc. dans tous les domaines de la vie. Matériel, fournissant des solutions d'interaction avec écran à faible coût pour offrir aux utilisateurs d'appareils IoT une expérience plus standardisée et plus riche en fonctionnalités.

Cela me rappelle le dicton La loi d'Atwood qui circule dans le domaine de la technologie informatique depuis des décennies. Toute application pouvant être écrite en JavaScript finira par être écrite en JavaScript. De même, tout produit pouvant être implémenté à l’aide de mini-programmes sera finalement implémenté à l’aide de mini-programmes.

Perspectives de développement des mini programmes

Depuis la naissance des mini programmes WeChat en 2017, le modèle super App + mini programmes/applications légères a été éprouvé et testé dans diverses entreprises, comme WeChat et les mini programmes WeChat, Mini-programmes Alipay et Alipay, mini-programmes Douyin et Douyin, etc. Les mini-programmes, un modèle de produit à faible coût, à itération rapide et à promotion facile, ont obtenu un grand succès dans divers domaines grâce au soutien de l'énorme trafic apporté par les super applications, et Devenu progressivement une tendance, de plus en plus d'entreprises ajoutent ce modèle à leurs produits. Le mini-programme lui-même a été intégré sans le savoir dans tous les aspects de la vie. Pendant l'épidémie, les applications du code de la santé dans diverses régions, les mini-codes de programme pour les achats groupés de commerce électronique et les commandes de restaurants dans la communauté, et ceux qui veulent boire du thé au lait et le café peut les télécharger à l'avance sur le mini programme. En fait, la vie des gens est indissociable des petits programmes. La solution technologique des petits programmes a en effet créé une grande valeur sociale.

Lorsque je discutais avec un ami, j'ai dit en plaisantant que les mini-programmes sont des applications PWA aux caractéristiques chinoises. Face à l'avenir, les mini-programmes ont encore un grand potentiel en plus des applications d'achat en ligne et de services de vie existantes qui représentent un relativement grand potentiel. Dans une proportion élevée, ils peuvent également être utilisés dans davantage de scénarios. Nous pouvons constater l'utilité de la technologie des mini-programmes, tels que les soins de santé, la vente au détail hors ligne, les jeux de divertissement, l'intelligence artificielle et d'autres secteurs, qui sont loin d'atteindre la saturation du marché. rend le potentiel de développement des mini-programmes encore plus grand. Les mini-programmes évoluent constamment vers l'objectif initial de rendre les mini-programmes accessibles et omniprésents.

Adresse originale : https://juejin.cn/post/7100752247381819399

(Partage de vidéos d'apprentissage :

Démarrer avec le front-end Web

)