How WeChat mini programs solve the problem of returning a large amount of redundant data in the background

The content of this article is about how the WeChat applet solves the problem of returning a large amount of redundant data in the background. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The platform interface returns an array. There are N objects in the array, and each object contains dozens or hundreds of data. The most interesting thing is that I only need certain two data in each object... ,

Similar to this:

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

Actually, I only need the ID and name, and I can find the backend to solve it...Forget it, but I was born a Confucian scholar, gentle and elegant, and I can't win a fight. If you can win, just fight, and let them change it after the fight!
If the amount of data is too large, will it have a big impact on network requests? To be honest, it's not a big picture, and it's not a few megabytes of pictures. I can't feel any delay in the speed of returning data.
But will too much data have any impact on the mini program rendering interface?

The answer is: Yes! Generally we loop data in wxml, and then take out item.id and item.name. Other data seems to have nothing to do with us, but when checking the official document setData related information, there is the following paragraph
setData It is the most frequently used interface in small program development and is also the interface most likely to cause performance problems. Before introducing common incorrect usages, let’s briefly introduce the working principle behind setData.
Working principle

The view layer of the applet currently uses WebView as the rendering carrier, while the logic layer uses independent JavascriptCore as the running environment. Architecturally, WebView and JavascriptCore are independent modules and do not have channels for direct data sharing. Currently, data transmission between the view layer and the logic layer is actually implemented through the evaluateJavascript provided by both parties. That is, the data transmitted by the user needs to be converted into a string and passed on. At the same time, the converted data content is spliced ​​into a JS script, and then passed to the independent environments on both sides by executing the JS script.
The execution of evaluateJavascript will be affected by many aspects, and the data arriving at the view layer is not real-time.
In fact, all the data in our setData is converted into a string, and then the string postage is converted into a JS script, and then the page renders the page according to the JS script. Then what we can do is to transmit as little data as possible. At this time, returning this large string of data in the background is contrary to this, so it is best to create a new tempData, take out the required data, and then setDta the tempData. To improve the page rendering speed of WeChat mini programs, improve the operating efficiency of WeChat mini programs, and optimize the user experience of WeChat mini programs.
We can write like this:

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

Or use the higher-order function map():

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

At this time, we can use setData({}) to improve rendering efficiency

Share two more setData skills at the same time

1. There is an Object as follows

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

It has been rendered to the page at this time, and then we modified obj. You can choose at this time:

1) The usual approach

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

2) But the more optimized approach is

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

not only saves two lines of code, but also improves page rendering efficiency 2. In fact, it is similar to 1 , that is, Object becomes an array Array. When we want to modify one of the data in the array, we can refer to the above method

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

When we want to modify multiple data in the array, we will write a Loop, and then modify the array. It is unrecognizable at this time and should be written in the following form

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

Related recommendations:

Code implementation of formatting time in WeChat applet

The above is the detailed content of How WeChat mini programs solve the problem of returning a large amount of redundant data in the background. For more information, please follow other related articles on the PHP Chinese website!