Comment les mini-programmes WeChat résolvent le problème du renvoi d'une grande quantité de données redondantes en arrière-plan

Le contenu de cet article explique comment l'applet WeChat résout le problème du renvoi d'une grande quantité de données redondantes en arrière-plan. Elle a une certaine valeur de référence. J'espère que cela vous sera utile. .

L'interface de la plateforme renvoie un tableau. Il y a N objets dans le tableau, et chaque objet contient des dizaines ou des centaines de données. La chose la plus intéressante est que je n'ai besoin que de certaines données dans chaque objet... ,

Semblable à ceci :

datas:[
 {
 id:1000,
 name: "帅哥"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 {
 id:1001,
 name: "美女"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 ...
]

En fait, je n'ai besoin que de l'identifiant et du nom, et je peux trouver le backend pour le résoudre. Oui, si vous pouvez gagner, combattez-vous, et. qu'ils le changent après le combat !
La quantité de données aura-t-elle un impact important sur les requêtes réseau ? Pour être honnête, ce n'est pas une grande image, et ce ne sont pas quelques mégaoctets d'images, je ne ressens aucun retard dans la vitesse de retour des données.
Mais trop de données auront-elles un impact sur l'interface de rendu du mini programme ?

La réponse est : Oui ! Généralement, nous bouclons les données dans wxml, puis supprimons item.id et item.name. Les autres données semblent n'avoir rien à voir avec nous, mais lorsque l'on regarde les informations relatives au document officiel setData, il y a le paragraphe suivant.
setData C'est l'interface la plus fréquemment utilisée dans le développement de petits programmes et c'est également l'interface la plus susceptible de causer des problèmes de performances. Avant d'introduire les utilisations incorrectes courantes, présentons brièvement le principe de fonctionnement de setData.
Principe de fonctionnement

La couche d'affichage de l'applet utilise actuellement WebView comme support de rendu, tandis que la couche logique utilise JavascriptCore indépendant comme environnement d'exécution. Sur le plan architectural, WebView et JavascriptCore sont des modules indépendants et ne disposent pas de canaux pour le partage direct de données. Actuellement, la transmission de données entre la couche de visualisation et la couche logique est en fait implémentée via le évaluerJavascript fourni par les deux parties. Autrement dit, les données transmises par l'utilisateur doivent être converties en chaîne et transmises. En même temps, le contenu des données converties est fusionné dans un script JS, puis transmis aux environnements indépendants des deux côtés en s'exécutant. le script JS.
L'exécution d'evaluJavascript sera affectée par de nombreux aspects, et les données arrivant à la couche de vue ne sont pas en temps réel.
En fait, toutes les données de notre setData sont converties en chaîne, puis l'affranchissement de la chaîne est converti en un script JS, puis la page restitue la page selon le script JS. Ensuite, ce que nous pouvons faire est de transmettre le moins de données possible. À l'heure actuelle, renvoyer cette grande chaîne de données en arrière-plan est contraire à cela, il est donc préférable de créer un nouveau tempData, de supprimer les données requises. , puis setDta le tempData. Pour améliorer la vitesse de rendu des pages des mini-programmes WeChat, améliorer l'efficacité opérationnelle des mini-programmes WeChat et optimiser l'expérience utilisateur des mini-programmes WeChat.
Nous pouvons écrire comme ceci :

[mw_shl_code=applescript,true] var tempData = []
for(var i = 0; i < datas.length; i++) {
var tempObj = {}
tempObj.id = datas[i].id
tempObj.name = datas[i].name
tempData.push(tempObj)
}
console.log(tempData)
[/mw_shl_code]

ou utiliser la fonction d'ordre supérieur map() :

let tempDatas = datas.map(function(data){
 return {
 id: data.id,
 name: data.name 
 } 
 })
console.log(tempDatas)

À ce stade, nous pouvons utiliser setData({}) pour améliorer l'efficacité du rendu

En même temps, partagez deux techniques setData

1 Il y a un objet comme suit

obj:{a:"a",b:"b",c:"c"},

À ce stade, il a été rendu. la page, puis nous avons modifié obj, ceci Vous pouvez choisir :

1) L'approche habituelle

let obj = this.data.objobj.b = "我是后来修改的"this.setData({ obj: obj})

2) Mais l'approche la plus optimisée est

this.setData({ 'obj.b': "我是后来修改的"})

qui non seulement enregistre deux lignes de code, mais améliore également l'efficacité du rendu des pages 2. En fait, c'est similaire à 1, c'est-à-dire que l'objet devient un tableau Tableau. Lorsque nous voulons modifier l'une des données du tableau, nous le faisons. peut se référer à la méthode ci-dessus

this.setData({ 'array[1]': "我是后来修改的"})

Quand on veut modifier le tableau Lors de la modification de plusieurs données, on va écrire une boucle puis modifier le tableau À ce moment, il est méconnaissable. sous la forme suivante

for(var i = 0;i < 5;i++) { 
 this.setData({ [`array[${i}]`]:"我是后来修改的" 
}) }

Recommandations associées :

Implémentation du code de l'heure de formatage dans l'applet WeChat

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!