小程序setData數據量過大時候會對渲染有影響嗎？

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

如上：后台返回數據中有可能包含了大量的無用數據，數據量如果過大時候會對小程序渲染界面有影響嗎？

答案是：有

一般情況下我們是在wxml中循環data，然后取出我們需要的字段，其他數據和我們無關。但是小程序文檔中有這么一段話：

setData 是小程序開發中使用最頻繁的接口，也是最容易引發性能問題的接口。在介紹常見的錯誤用法前，先簡單介紹一下 setData 背后的工作原理。

工作原理

小程序的視圖層目前使用 WebView 作為渲染載體，而邏輯層是由獨立的 JavascriptCore 作為運行環境。在架構上，WebView 和 JavascriptCore 都是獨立的模塊，並不具備數據直接共享的通道。當前，視圖層和邏輯層的數據傳輸，實際上通過兩邊提供的 evaluateJavascript 所實現。即用戶傳輸的數據，需要將其轉換為字符串形式傳遞，同時把轉換后的數據內容拼接成一份 JS 腳本，再通過執行 JS 腳本的形式傳遞到兩邊獨立環境。

而 evaluateJavascript 的執行會受很多方面的影響，數據到達視圖層並不是實時的。

其實就是我們setData里面的所有數據都被轉成了字符串，然后字符串又轉換成JS腳本，然后頁面根據JS腳本去渲染頁面。那么我們能做的就是盡量少傳數據，而此時后台返回這一大串數據就與此相悖了，所以最好是新建一個tempData,將要的數據取出來之后再setDta這個tempData，以此來提高微信小程序的頁面渲染速度，提升微信小程序運行效率，優化微信小程序的用戶體驗。

可以這樣寫：

let tempData = []
for(let i = 0; i < datas.length; i++) {
    let tempObj = {
        id: datas[i].id,
　　　   name: datas[i].name
    }
    tempData.push(tempObj)
}
console.log(tempData)

也可以使用高階函數map：

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

此時我們再使用setData({})就能提高渲染效率了

同時再分享兩個setData技巧

1、有一個Object如下：

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

此時已經渲染到頁面了，然后我們修改了obj,此時可以選擇：

① 平時做法：

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

② 但是更優化的做法是

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

不僅省了兩行代碼，同時還提高頁面渲染效率

2、和 1 差不多，就是Object變成數組Array，當我們要給數組的其中一個數據進行修改時，我們可以參照上面的方法

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

當我們要給數組的多個數據進行修改時，我們會寫一個循環，然后修改array,此時是無法識別的,要寫成如下形式

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

 原文地址：https://blog.csdn.net/rolan1993/article/details/81738613