La façon d'optimiser les performances du mini programme de Lewand

Cet article dure environ 10 minutes. Les petits développeurs de programmes de Lewan Alliance sont tous des produits secs ~

Fond d'applet

Depuis le lancement du programme Play Mini l'année dernière, je me suis fixé comme objectif «une expérience avec une expérience exquise semblable à une appli», ce qui est sans aucun doute un défi pour une personne qui souhaite développer le programme Mini.

Pour atteindre cet objectif, les «performances des pages», «une expérience produit conviviale» et un «service système stable» sont devenus mes principes de mise en œuvre les plus élémentaires.

La page d'accueil est le visage de la mini-application, et ses performances sont étroitement liées au taux de rétention des utilisateurs. Par conséquent, au début de 2020, j'ai effectué une mise à niveau et une rénovation complètes de la page d'accueil de Lewan, creusant dans la plasticité des performances des petits programmes de chargement, de rendu et d'autres dimensions.

De plus, afin d'améliorer l'efficacité de la recherche et du développement, alors que l'entreprise ajoute de nouveaux besoins, elle est constamment en train de s'optimiser et de se transformer. L'applet de l'alliance Lewan d'aujourd'hui peut être considérée comme complètement nouvelle.

Qu'est-ce que la haute performance?

Quand il s'agit de hautes performances, tout le monde dira: "La page se charge assez rapidement." Il semble que la vitesse de chargement soit devenue la norme pour les hautes performances, mais elle ne suffit pas pour charger rapidement.

Pensez-y, la page se charge rapidement, mais l'image du carrousel se fige, la zone de recherche n'est pas valide, la mise en page n'est pas uniforme et esthétique, tirez Laton, pensez-y suffisamment pour laisser les utilisateurs perdre. Par conséquent, la seule vitesse de chargement ne suffit pas.

Analyse des performances d'arrière-plan de l'applet

Le programme WeChat Mini dispose également d'indicateurs de performance:

• Le premier temps d'écran ne dépasse pas 5 secondes;
• Le temps de rendu ne dépasse pas 500 ms;
• Le nombre d'appels par seconde  setData ne dépasse pas 20 fois;
• setData Les données à l'  JSON.stringify avenir ne dépassent pas 256 Ko;
• Le noeud WXML de la page est inférieur à 1 000, la profondeur de l'arborescence des noeuds est inférieure à 30 couches et le nombre de noeuds enfants ne dépasse pas 60;
• Toutes les demandes de réseau renvoient des résultats dans la seconde;

 

Ces données, vous pouvez utiliser l'outil de notation de l'expérience de l' outil développeur (panneau `Audits`) pour connaître le score, en fonction des suggestions d'optimisation données, des ajustements ciblés

 

Deuxièmement, nous pouvons également analyser les données en fonction des trois dimensions de la plate - forme de gestion des applets, de l'assistant des applets et des performances du réseau

Grâce à ces outils auxiliaires, nous pouvons effectuer une analyse détaillée en fonction des conditions du système client , du modèle , de l' environnement réseau et de la source d'accès , ce qui est toujours très précieux.

Analyse des performances du mini programme de Lewan Alliance

1. L'applet démarre trop lentement

 

D'abord, analysez la raison:

À ce stade, petits programmes (y compris le calendrier avant et après le démarrage), WeChat effectuera en silence les tâches suivantes:

1. Préparez l'environnement d'exploitation:

2. Téléchargez le package de code d'applet:

3. Chargez le package de code d'applet:

4. Initialiser la page d'accueil du mini programme:

Dans cette étape, la clé est de contrôler la taille du petit package de programme , ce qui peut effectivement raccourcir le temps de téléchargement (contrôler la taille du package peut ressentir intuitivement l'amélioration des performances du petit programme)

Deuxièmement, pour contrôler la taille du paquet, ma méthode habituelle est la suivante:

1. Suppression des fichiers, fonctions et styles inutiles:

2. Réduisez les fichiers de ressources statiques dans le package de code: il est recommandé de placer des ressources statiques telles que des images et des vidéos sur le CDN.

3. Logique descendante, rationaliser la logique métier: Généralement, la logique de présentation qui n'implique pas l'informatique frontale peut être déplacée vers l'arrière de manière appropriée. Cela dépend de vous de discuter avec vos camarades de classe backend, de leur donner les exigences de transformation et de faire attention à être battu chaque minute (une blague) ... mais cela peut vraiment économiser beaucoup de code frontend, et plusieurs fois, ce qui est trouvé après être allé en ligne Problème. Il peut également être résolu directement sur le back-end, sans examen, puis publié

4. Réutilisez le plugin de modèle:

5. Chargement en sous-traitance, une partie de la page est h5

2. Temps d'écran blanc

L'écran blanc pendant cette période est principalement composé de deux éléments:

D'abord, analysez la raison:

1. Temps de chargement des ressources réseau:

2. Temps de rendu:

Deuxièmement, quelle est la solution?

1. Démarrez le cache local: lorsque l'utilisateur accède à la page, les données renvoyées par la dernière demande d'interface peuvent d'abord être extraites du cache, puis écrasées une fois la demande réseau terminée (mais sachez que certaines données opportunes ne fonctionneront pas, cela dépend toujours Scénario d'utilisation), Lewand ne l'a pas encore utilisé. Utilisez wx.getBackgroundFetchData pour fournir une solution de données de cache côté client fournie par WeChat. Documentation officielle https://developers.weixin.qq.com/miniprogram/dev/api/storage/background-fetch/wx.getBackgroundFetchData.html

2. Rendu en temps partagé: en retardant le temps de rendu des éléments non clés, libérez des ressources pour les chemins de rendu clés.

On peut voir que le nouveau tableau sur aujourd'hui est intentionnellement reporté pour le rendu, de sorte que les ressources sont libres pour rendre l'image de la bannière (il existe de nombreuses images de bannière dans le petit programme de l'alliance Lewan)

3. Les images utilisent le format webP: un format de fichier image introduit par Google qui prend en charge la compression avec ou sans perte, et peut être utilisé par les étudiants disposant de ressources

4.  Recadrage et dégradation des images: Alibaba Cloud OSS est utilisé pour Lewan

5.  Chargement d'images paresseuses, optimisation de CSS Sprite: le menu de deuxième niveau de la page d'accueil de Leplay consiste à utiliser l'image Sprite, la balise img du programme de chargement d'images paresseuses a  lazy-load = "true"

6.  Rétrograder et charger des ressources d'image volumineuses: dans Leplay, presque toutes les images volumineuses utilisent cette méthode (voir la bannière sur la page d'accueil) ( nous pouvons d'abord rendre des images floues très compressées et utiliser un  nœud caché pour charger l'image d'origine, Une fois l'image d'origine chargée, elle sera transférée vers le nœud réel pour le rendu <image> .)

<! - banner.wxml -> 
< image src = "{{url}}"  /> 

<! - 图片 加载 器-> 
< image
   style = "width: 0; height: 0; display: none" 
  src = "{{preloadUrl}}" 
  bindload = "onImgLoad" 
  binderror = "onErrorLoad" 
/>

méthodes: { 
    onImgLoad () { 
      this .setData ({ 
        url: this .originUrl                        // Charger l'image d'origine 
      }) 
    } 
  }

Ce qui précède est le code clé pour rétrograder et charger des images (notez que les  balises avec des  styles ne chargeront que les ressources d'image, mais pas le rendu. ) display: none <image>

Minuterie de recyclage de la page d'arrière-plan

Cette étape est particulièrement critique dans l'applet Leplay, qui a beaucoup d'exigences de page pour utiliser setInterval , setTimeout

Pendant les heures de pointe, une page devra exécuter dix minuteries en même temps.  Vous devez donc nettoyer manuellement la page (composant)  et  restaurer la minuterie à ce  moment. Le rappel  d' une minuterie  est insignifiant, mais il ne peut pas être ignoré.onHideonShowsetData

Évitez les opérations de mémoire répétées lors d'événements fréquents

1. onPageScroll Limitation du rappel d'événement: limitation de la fonction de référence Throttle

2. Évitez les opérations gourmandes en ressources processeur, telles que les calculs complexes;

3. Évitez d'appeler ou de réduire  la quantité de données: setData setDatadelete  données inutiles

4. Essayez d'utiliser IntersectionObserver ^[24]  au lieu de  SelectorQuery ^[25] , le premier a moins d'impact sur les performances;

Résumé

Grâce à l'analyse et à la résolution des problèmes ci-dessus, les performances du Lewand Mini Program ont été considérablement améliorées. Merci à la petite équipe du programme Jingxi pour le partage technique, reportez-vous au lien https://mp.weixin.qq.com/s/nXModRImp4H7iisMQSc2Wg

Sur la base des principes d'architecture sous-jacents des applets, le chemin vers l'étude des performances des applets est encore long.Je continuerai à travailler dur sur la route de la recherche de performances et de l'amélioration de l'expérience.

Enfin, j'espère que ce partage vous apportera une petite valeur de référence.