微信小程序的一大優(yōu)勢(shì)體現(xiàn)在「小」上面，小而輕的微信小程序，能給用戶帶來非常良好的體驗(yàn)。

但是要想將小程序輕快的特點(diǎn)發(fā)揮到極致，開發(fā)者還是要多下一點(diǎn)功夫。。

1. 壓縮小程序包體積

從點(diǎn)擊打開一個(gè)微信小程序，到第一個(gè)頁面加載完，通常情況下需要 2 到 3 秒的時(shí)間。

這 2 到 3 秒的時(shí)間里，小程序完成了數(shù)據(jù)包的加載與同服務(wù)器間的通訊。自然地，在加載數(shù)據(jù)包時(shí)，數(shù)據(jù)包的大小與加載時(shí)間成正相關(guān)。

微信小程為了提高加載速度，刻意將數(shù)據(jù)包的大小限制到了 2 MB（最早為 1 MB）。我們要做的是在 2 MB 的基礎(chǔ)下，進(jìn)一步去減少數(shù)據(jù)包的大小。

具體來說，不要在數(shù)據(jù)包里放置大的圖片及其他文件，也不用過多的圖片來當(dāng) UI，還可以縮減代碼的行數(shù)等。通過這些方法，最高可減少約 1 秒的加載時(shí)間哦！

2. 大圖片和長(zhǎng)圖片

在微信小程序的頁面里不要放置大的圖片。

在小程序里，進(jìn)行頁面加載或跳轉(zhuǎn)時(shí)，通常頁面已經(jīng)出現(xiàn)或者跳轉(zhuǎn)完成，但大體積圖片往往還正在加載。這樣會(huì)嚴(yán)重影響用戶體驗(yàn)。

如果小程序以提供高清大圖為主題的話，像上述的「必應(yīng)觀世界」。我們可以選擇在頁面里顯示適當(dāng)壓縮的圖片，再在 wx.previewImage() 中顯示原圖即可。

wx.previewImage({
  current: '', // 當(dāng)前顯示圖片的http鏈接
  urls: [] // 需要預(yù)覽的圖片http鏈接列表
})

在微信小程序里放置長(zhǎng)圖片，會(huì)出現(xiàn)在頁面插入大圖片類似的情況。

不同的是，長(zhǎng)圖片的 mode 通常只選擇 aspectFit，然后在小程序加載時(shí)，就會(huì)出現(xiàn)以下結(jié)果：這個(gè)圖片會(huì)以被壓扁了的形式先出現(xiàn)，之后再按正常的形式出現(xiàn)。（不知道的還以為亂碼了呢?。?/p>

對(duì)于這類圖片，建議將其截短，分段在小程序中進(jìn)行展示。

3. 不要濫用 setData

setData 是微信小程序里運(yùn)用得非常頻繁的一個(gè)接口，在數(shù)據(jù)綁定后對(duì)數(shù)據(jù)進(jìn)行賦值是常用方法。語法如下：

var that = this
  that.setData({
  imageUrl: "http://XX/XX/X.jpg",
})

微信小程序的視圖層和邏輯層相互獨(dú)立，setData 是跨層實(shí)現(xiàn)數(shù)據(jù)的傳遞，中間過程復(fù)雜且耗時(shí)。

使用一些 setData 不嚴(yán)謹(jǐn)?shù)男〕绦?，?dāng)執(zhí)行下拉刷新或滑動(dòng)頁面時(shí)，你會(huì)感覺到明顯的卡頓感。這是由于此時(shí)小程序在頻繁 setData，程序無法將用戶操作實(shí)時(shí)傳輸?shù)竭壿媽樱壿媽拥慕Y(jié)果就更加無法傳輸給視圖層了。

但這并非代表只要使用 setData 就會(huì)造成卡頓、要放棄它，我的建議是：合理運(yùn)用事件來觸發(fā) setData，切莫利用時(shí)鐘頻繁賦值，且不要一次性 setData 太多值，容易造成卡頓。