setData

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

工作原理

小程序的(de)(de)(de)視圖層目(mu)前(qian)(qian)使用(yong) WebView 作(zuo)為(wei)渲染載體，而(er)邏(luo)輯層是(shi)由獨(du)(du)立的(de)(de)(de) JavascriptCore 作(zuo)為(wei)運行環(huan)境(jing)。在架(jia)構上(shang)，WebView 和 JavascriptCore 都是(shi)獨(du)(du)立的(de)(de)(de)模塊，并不具(ju)備數(shu)(shu)據(ju)直接(jie)共享的(de)(de)(de)通(tong)道。當前(qian)(qian)，視圖層和邏(luo)輯層的(de)(de)(de)數(shu)(shu)據(ju)傳(chuan)輸，實(shi)際上(shang)通(tong)過兩邊提供的(de)(de)(de)evaluateJavascript 所(suo)實(shi)現。即用(yong)戶(hu)傳(chuan)輸的(de)(de)(de)數(shu)(shu)據(ju)，需要將(jiang)其轉(zhuan)換為(wei)字符串形(xing)式傳(chuan)遞(di)，同時把轉(zhuan)換后的(de)(de)(de)數(shu)(shu)據(ju)內容拼接(jie)成一份(fen) JS 腳(jiao)(jiao)本，再通(tong)過執行 JS 腳(jiao)(jiao)本的(de)(de)(de)形(xing)式傳(chuan)遞(di)到兩邊獨(du)(du)立環(huan)境(jing)。

而(er) evaluateJavascript 的(de)執(zhi)行會受很多方面的(de)影響，數據到達視圖(tu)層并不是實(shi)時的(de)。

常見的 setData 操作錯誤

1. 頻繁(fan)的去 setData

在(zai)我們分(fen)析過的(de)一些案例(li)里，部分(fen)小(xiao)程(cheng)序會(hui)非(fei)常(chang)頻繁(fan)（毫秒(miao)級(ji)）的(de)去setData，其(qi)導致了(le)兩個后果(guo)：

• Android 下用戶在滑動時會感覺到卡頓，操作反饋延遲嚴重，因為 JS 線程一直在編譯執行渲染，未能及時將用戶操作事件傳遞到邏輯層，邏輯層亦無法及時將操作處理結果及時傳遞到視圖層；
• 渲染有出現延時，由于 WebView 的 JS 線程一直處于忙碌狀態，邏輯層到頁面層的通信耗時上升，視圖層收到的數據消息時距離發出時間已經過去了幾百毫秒，渲染的結果并不實時；

2. 每次 setData 都傳遞大量新(xin)數據

由setData的底(di)層實現可知，我(wo)們的數據傳輸實際是(shi)一次 evaluateJavascript 腳本(ben)過程(cheng)，當(dang)數據量過大(da)時會增加腳本(ben)的編譯(yi)執(zhi)行時間，占用 WebView JS 線程(cheng)，

3. 后臺態(tai)頁面(mian)進(jin)行 setData

當頁(ye)面(mian)進(jin)入后臺(tai)態（用(yong)戶(hu)不可(ke)見），不應該繼續去(qu)進(jin)行(xing)setData，后臺(tai)態頁(ye)面(mian)的(de)渲染(ran)用(yong)戶(hu)是無法感(gan)受的(de)，另外后臺(tai)態頁(ye)面(mian)去(qu)setData也會搶占前臺(tai)頁(ye)面(mian)的(de)執行(xing)。

圖片資源

目前圖片(pian)(pian)(pian)資(zi)源的主要性能(neng)問(wen)題(ti)在于大圖片(pian)(pian)(pian)和長列表圖片(pian)(pian)(pian)上，這兩種情況都有可能(neng)導致(zhi) iOS 客戶端內存占用上升，從(cong)而觸(chu)發系統(tong)回收(shou)小程序頁(ye)面。

圖片對內存的影響

在 iOS 上，小程序的(de)頁面是由多(duo)個 WKWebView 組成的(de)，在系統(tong)內存(cun)緊張時，會(hui)回收掉一部(bu)分 WKWebView。從過(guo)去我們分析(xi)的(de)案(an)例來看，大圖片(pian)和長列表圖片(pian)的(de)使用會(hui)引起(qi) WKWebView 的(de)回收。

圖片對頁面切換的影響

除了內存問題(ti)外，大(da)圖片(pian)也會造(zao)成(cheng)頁(ye)面(mian)切(qie)換(huan)的(de)卡頓(dun)(dun)。我們分析過的(de)案例中，有一部分小程序會在(zai)(zai)頁(ye)面(mian)中引用(yong)大(da)圖片(pian)，在(zai)(zai)頁(ye)面(mian)后退切(qie)換(huan)中會出現掉幀(zhen)卡頓(dun)(dun)的(de)情(qing)況。

當前(qian)我們(men)建議開發者(zhe)盡量減少使用大圖片資源。

代碼包大小的優化

小程序(xu)一開(kai)(kai)始時代(dai)碼(ma)包限制為(wei) 1MB，但我們收到(dao)了(le)很多反饋說代(dai)碼(ma)包大小不夠(gou)用(yong)，經過評估后我們放開(kai)(kai)了(le)這個(ge)限制，增(zeng)加(jia)(jia)到(dao) 2MB 。代(dai)碼(ma)包上(shang)限的增(zeng)加(jia)(jia)對于開(kai)(kai)發者來說，能夠(gou)實現更(geng)豐富的功能，但對于用(yong)戶來說，也增(zeng)加(jia)(jia)了(le)下載流量和(he)本地空間的占用(yong)。

開發者(zhe)在實現業務邏輯同時(shi)也有必要(yao)盡量(liang)減少代(dai)碼包(bao)的(de)大小，因為代(dai)碼包(bao)大小直(zhi)接影(ying)響到下載速度(du)，從而影(ying)響用戶(hu)的(de)首次打(da)開體驗。除了代(dai)碼自身的(de)重構優化外，還可(ke)以(yi)從這兩方面著(zhu)手優化代(dai)碼大小：

控制代碼包內圖片資源

小(xiao)程序(xu)(xu)代(dai)碼(ma)包經(jing)過編譯后，會(hui)(hui)放在微信(xin)的(de)(de)(de)(de)(de) CDN 上供用戶(hu)下(xia)載(zai)，CDN 開啟(qi)了 GZIP 壓(ya)縮(suo)(suo)，所以用戶(hu)下(xia)載(zai)的(de)(de)(de)(de)(de)是壓(ya)縮(suo)(suo)后的(de)(de)(de)(de)(de) GZIP 包，其大(da)小(xiao)比(bi)代(dai)碼(ma)包原體積會(hui)(hui)更小(xiao)。 但我們分(fen)析數據發現，不同小(xiao)程序(xu)(xu)之間的(de)(de)(de)(de)(de)代(dai)碼(ma)包壓(ya)縮(suo)(suo)比(bi)差(cha)異也挺大(da)的(de)(de)(de)(de)(de)，部(bu)分(fen)可以達到 30%，而部(bu)分(fen)只有 80%，而造成這部(bu)分(fen)差(cha)異的(de)(de)(de)(de)(de)一個(ge)原因，就是圖(tu)片(pian)資(zi)源(yuan)的(de)(de)(de)(de)(de)使(shi)用。GZIP 對基于文(wen)本(ben)資(zi)源(yuan)的(de)(de)(de)(de)(de)壓(ya)縮(suo)(suo)效果最(zui)好，在壓(ya)縮(suo)(suo)較大(da)文(wen)件時往(wang)(wang)往(wang)(wang)可高達 70%-80% 的(de)(de)(de)(de)(de)壓(ya)縮(suo)(suo)率，而如果對已經(jing)壓(ya)縮(suo)(suo)的(de)(de)(de)(de)(de)資(zi)源(yuan)（例如大(da)多數的(de)(de)(de)(de)(de)圖(tu)片(pian)格(ge)式）則效果甚微。

及時清理沒有使用到的代碼和資源

 在日常開(kai)發的時(shi)候(hou)，我們可能(neng)引(yin)入了(le)(le)一(yi)(yi)些新的庫(ku)文(wen)件(jian)，而(er)過了(le)(le)一(yi)(yi)段(duan)時(shi)間(jian)后(hou)，由于(yu)各種原(yuan)因又不(bu)再使(shi)用這個庫(ku)了(le)(le)，我們常常會只是(shi)去掉(diao)(diao)了(le)(le)代(dai)(dai)碼(ma)里的引(yin)用，而(er)忘(wang)記刪掉(diao)(diao)這類庫(ku)文(wen)件(jian)了(le)(le)。目(mu)前(qian)小程(cheng)序打包(bao)是(shi)會將工程(cheng)下(xia)所有(you)文(wen)件(jian)都打入代(dai)(dai)碼(ma)包(bao)內，也(ye)就是(shi)說，這些沒有(you)被實際使(shi)用到(dao)的庫(ku)文(wen)件(jian)和(he)資源也(ye)會被打入到(dao)代(dai)(dai)碼(ma)包(bao)里，從而(er)影響到(dao)整(zheng)體代(dai)(dai)碼(ma)包(bao)的大(da)小。