Wie WeChat-Miniprogramme das Problem lösen, im Hintergrund eine große Menge redundanter Daten zurückzugeben

Der Inhalt dieses Artikels handelt davon, wie das WeChat-Applet das Problem der Rückgabe einer großen Menge redundanter Daten im Hintergrund löst. Ich hoffe, dass es für Sie hilfreich ist .

Die Plattformschnittstelle gibt ein Array zurück. Es gibt N Objekte im Array und jedes Objekt enthält Dutzende oder Hunderte von Daten. Das Interessanteste ist, dass ich nur bestimmte zwei Daten in jedem Objekt benötige.

Ähnlich wie hier:

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

Eigentlich brauche ich nur die ID und den Namen, und ich kann das Backend finden, um das Problem zu lösen. Wenn Sie gewinnen können, kämpfen Sie einfach und lassen Sie es ändern nach dem Kampf!
Wird die Datenmenge einen großen Einfluss auf Netzwerkanfragen haben? Ehrlich gesagt handelt es sich nicht um ein großes Bild und es handelt sich nicht um ein paar Megabyte an Bildern. Ich kann keine Verzögerung bei der Geschwindigkeit der Datenrückgabe feststellen.
Aber haben zu viele Daten Auswirkungen auf die Rendering-Oberfläche des Miniprogramms?

Die Antwort lautet: Ja! Im Allgemeinen schleifen wir Daten in wxml und nehmen dann item.id und item.name heraus. Andere Daten scheinen nichts mit uns zu tun zu haben, aber wenn wir uns die offiziellen Dokumentsatzdaten ansehen, gibt es den folgenden Absatz
setData Es ist die am häufigsten verwendete Schnittstelle in der Entwicklung kleiner Programme und auch die Schnittstelle, die am wahrscheinlichsten Leistungsprobleme verursacht. Bevor wir auf häufige falsche Verwendungen eingehen, stellen wir kurz das Funktionsprinzip von setData vor.
Funktionsprinzip

Die Ansichtsschicht des Applets verwendet derzeit WebView als Rendering-Träger, während die Logikschicht den unabhängigen JavascriptCore als laufende Umgebung verwendet. Architektonisch sind WebView und JavascriptCore unabhängige Module und verfügen über keine Kanäle für den direkten Datenaustausch. Derzeit wird die Datenübertragung zwischen der Ansichtsschicht und der Logikschicht tatsächlich über das von beiden Parteien bereitgestellte EvaluateJavascript implementiert. Das heißt, die vom Benutzer übertragenen Daten müssen in eine Zeichenfolge umgewandelt und weitergegeben werden. Gleichzeitig wird der konvertierte Dateninhalt in ein JS-Skript gespleißt und dann durch Ausführen an die unabhängige Umgebung auf beiden Seiten übergeben das JS-Skript.
Die Ausführung von „evalueJavascript“ wird von vielen Aspekten beeinflusst, und die Daten, die auf der Ansichtsebene ankommen, erfolgen nicht in Echtzeit.
Tatsächlich werden alle Daten in unserem setData in eine Zeichenfolge konvertiert, und dann wird die Zeichenfolge porto in ein JS-Skript konvertiert, und dann rendert die Seite die Seite gemäß dem JS-Skript. Dann können wir so wenig Daten wie möglich übertragen. Zu diesem Zeitpunkt ist es im Widerspruch dazu, diese große Datenfolge im Hintergrund zurückzugeben. Daher ist es am besten, ein neues tempData zu erstellen und die erforderlichen Daten herauszunehmen , und dann setDta die tempData, um die Seitenrendergeschwindigkeit von WeChat-Miniprogrammen zu verbessern, die Betriebseffizienz von WeChat-Miniprogrammen zu verbessern und die Benutzererfahrung von WeChat-Miniprogrammen zu optimieren.
Wir können so schreiben:

[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]

oder die Funktion map() höherer Ordnung verwenden:

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

Zu diesem Zeitpunkt können wir setData({}) verwenden, um die Rendering-Effizienz zu verbessern

Zwei weitere setData-Techniken gleichzeitig teilen

1. Es gibt ein Objekt wie folgt

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

Zu diesem Zeitpunkt wurde es auf der Seite gerendert und dann Wir haben Obj geändert. Zu diesem Zeitpunkt können Sie wählen:

1) Der übliche Ansatz ist

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

2) Der optimiertere Ansatz ist jedoch

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

, der nicht nur spart zwei Codezeilen, verbessert aber auch die Seitenrendering-Effizienz 2. Tatsächlich ist es fast dasselbe wie 1, das heißt, Object wird zu einem Array. Wenn wir eines der Daten im Array ändern möchten, können wir darauf verweisen Die obige Methode

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

Wenn wir mehrere Daten im Array ändern möchten, schreiben wir eine Schleife und ändern dann das Array. Dies ist zu diesem Zeitpunkt nicht erkennbar und sollte in der folgenden Form geschrieben werden

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

Verwandte Empfehlungen:

Code-Implementierung der Formatierungszeit im WeChat-Applet

Das obige ist der detaillierte Inhalt vonWie WeChat-Miniprogramme das Problem lösen, im Hintergrund eine große Menge redundanter Daten zurückzugeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!