小程(cheng)(cheng)序科普類的(de)文章已經很(hen)多了，這里(li)講下針對小程(cheng)(cheng)序的(de)優化方(fang)法，可以有效(xiao)提高小程(cheng)(cheng)序的(de)響應速度和用(yong)戶體驗(yan)。當(dang)然，開(kai)發體驗(yan)也提高不少。

1、提高頁面加載速度——前端永恒不變的話題

在小程序這個環境下，怎樣提高頁面加載速度呢？ 這個問題很大，我把問題具體一下，如何縮短從用戶(hu)點擊某個(ge)鏈接，到打開(kai)新頁面的這段時間？ 這里拋一個核(he)心關(guan)鍵(jian)點：

從頁面響(xiang)應用(yong)戶點擊行為，開始跳轉(zhuan)，到新(xin)頁面onload事件觸發(fa)，存在一個(ge)延(yan)遲，這個(ge)延(yan)遲大概在100-300ms之間（安卓響(xiang)應比(bi)ios慢(man)些）。

這個延(yan)遲說短不短，我(wo)們可以利用這段(duan)時(shi)(shi)間，預先發起新頁面所需要的網絡(luo)請求。這樣一來，就節省了100-300ms（或者一個網絡(luo)請求的時(shi)(shi)間）。

知道有這(zhe)個gap后，代碼(ma)如(ru)何實現呢？

說白了，就是實現一個在A頁面預加載B頁面數據的功能。但而這種跨頁面的調用，很容易把邏輯搞復雜，將不同頁面的邏輯耦合在一起。所以，我們希望將預加載的邏輯隱藏于無形中，不增加任何的頁面間耦合，以及開發(fa)復(fu)雜度。

下(xia)面以騰訊視頻小程序為例，講解下(xia)技術實現。

小程序首頁(ye)：

當用戶(hu)點擊海報圖后，會執行以(yi)下代碼（就一行）：

onPlay: function (e) {
        this.$route('/pages/play/index?cid='+this._cid);
}

接下(xia)來程(cheng)序會加載(zai)播放頁：

播放頁主(zhu)要代碼：

    fetchData: function (query) {
    },
    onNavigate: function (res) {
        this.$put('play-detail', this.fetchData(res.query));
    },
    onLoad: function (query) {
        this.$take('play-detail') || this.fetchData(query);
    }

可以看到，不管是外部頁面的調用還是實際邏輯的實現都非常簡潔。在第二個頁面中，我們擴展了Page的生命周期函數，增加了onNavigate方法。該方法在頁面(mian)即(ji)將被創建(jian)但(dan)還沒開(kai)始創建(jian)的時候執(zhi)行。

老司機(ji)也(ye)許會發現這里(li)有(you)點(dian)蹊蹺。在(zai)首頁點(dian)擊的(de)(de)時候(hou)，播放(fang)頁根本(ben)就沒有(you)創建，對象都不存在(zai)，怎么訪問到里(li)面的(de)(de)方(fang)法呢？

這(zhe)里(li)就(jiu)要說下微(wei)信(xin)的(de)頁(ye)面機制。

在小程序啟動時，會把所有調用Page()方法的object存在一個隊列里（如下圖）。每次頁面訪問的時候，微信會重新創建一個新的對象實例（實際上就是深拷貝）。也就是說，在A頁面在執行點擊響應事件的時候，B頁面的實例還沒創建，這時候調用的onNavigate方法，實際上是Page對象的原型（小程序啟動時候創建的那個）。而接下來馬上要被創建的B頁面，又是另外一個object。所以，在onNavigate和onLoad方法中，this指針指的不是同一個對象，不能把臨時數據存儲在當前object身上。因此我們封裝了一對全局的緩存方法，$put()和$take()。

為了(le)(le)(le)通用(yong)性(xing)，Page上(shang)用(yong)到的(de)(de)公(gong)共的(de)(de)方(fang)法(fa)，比如(ru)$route、$put、$take都(dou)定義(yi)在了(le)(le)(le)一個Page的(de)(de)基(ji)類里面(mian)(mian)。基(ji)類還同(tong)時(shi)保存(cun)了(le)(le)(le)所(suo)有(you)頁(ye)面(mian)(mian)的(de)(de)list，這樣(yang)就可以(yi)做到根(gen)據(ju)頁(ye)面(mian)(mian)名調用(yong)具體頁(ye)面(mian)(mian)的(de)(de)onNavigate方(fang)法(fa)。 當然，并不是每個頁(ye)面(mian)(mian)都(dou)需(xu)要(yao)(yao)實現(xian)onNavigate方(fang)法(fa)，對(dui)(dui)于沒有(you)定義(yi)onNavigate方(fang)法(fa)的(de)(de)，$route函數會(hui)跳過預加載環節(jie)，直接(jie)跳轉頁(ye)面(mian)(mian)。所(suo)以(yi)對(dui)(dui)于開發者來說，不需(xu)要(yao)(yao)關心(xin)別的(de)(de)頁(ye)面(mian)(mian)實現(xian)了(le)(le)(le)什么，對(dui)(dui)外看來完(wan)全透明。

2、用戶行為預測

在上面的例子中，我們實現了用戶主動點擊頁面，提前加載下一頁面數據的方法。而在某些場景下，用戶的行(xing)為可(ke)以預測，我們(men)可以在用戶還沒點擊的(de)時候就預加載下(xia)個頁(ye)面的(de)數(shu)據。讓(rang)下(xia)個頁(ye)面秒(miao)開，進一步提升體驗的(de)流(liu)暢性。

繼續(xu)以騰訊視頻(pin)小程序(xu)為例，主界面分為3個(ge)頁(ye)(ye)卡(ka)（大部分小程序(xu)都(dou)會(hui)(hui)這么設計），通過簡單的(de)(de)數(shu)據(ju)分析，發(fa)現進入(ru)首頁(ye)(ye)的(de)(de)用(yong)戶有(you)50%會(hui)(hui)訪問(wen)第二個(ge)頁(ye)(ye)卡(ka)。所以預加載第二個(ge)頁(ye)(ye)卡(ka)的(de)(de)數(shu)據(ju)可以很(hen)大程度提高用(yong)戶下個(ge)點擊(ji)頁(ye)(ye)面的(de)(de)打開速度。

同樣，先看看代碼(ma)實現。 首頁預(yu)加(jia)載頻道頁的姿(zi)勢：

onReady: function(){
        //預加載頻道頁
        this.$preLoad("/pages/channel/index")
    }

頻道頁的實現(xian)方法：

onPreload: function(req){
        //拉取數據
        this.fetchData({
            id: req.query.channelId ? req.query.channelId : defaultId,
            isPreload: true
        })
    }

跟第一個例子類似，這里定義了一個$preLoad()方法，同時給Page擴展了一個onPreload事件(jian)。頁面調用(yong)$preLoad()后，基(ji)類(lei)會自動找到該頁面對(dui)應的(de)(de)onPreload函數，通知頁面執行預加(jia)載操作。 跟第一個例(li)子不同，這里預加(jia)載的(de)(de)數據會保存(cun)(cun)在storage內，因為用(yong)戶不一定會馬上訪問頁面，而(er)把(ba)數據存(cun)(cun)在全局變量(liang)會增加(jia)小(xiao)程(cheng)序占用(yong)的(de)(de)內存(cun)(cun)。微信(xin)會毫(hao)不猶豫(yu)的(de)(de)把(ba)內存(cun)(cun)占用(yong)過大的(de)(de)小(xiao)程(cheng)序給殺掉。

也(ye)許(xu)對于大部分有app開發經(jing)驗的同學來(lai)說，更普遍的做法(fa)是先讓頁(ye)面(mian)展示(shi)上次緩存的數據，再實時拉取新(xin)數據，然后(hou)刷(shua)新(xin)頁(ye)面(mian)。這個(ge)方法(fa)在小(xiao)程序上也(ye)許(xu)體驗并(bing)不(bu)太(tai)好(hao)，原因(yin)是小(xiao)程序的性(xing)能以及頁(ye)面(mian)渲染(ran)速度都不(bu)如原生app。將一(yi)個(ge)大的data傳輸給UI層，是一(yi)個(ge)很重的操作。因(yin)此不(bu)建議采(cai)用(yong)這種方法(fa)。

3、減少默認data的大小

剛剛說到(dao)，頁(ye)面(mian)打開一(yi)個(ge)新(xin)頁(ye)面(mian)時微(wei)信會深拷(kao)貝一(yi)個(ge)page對象，因此，應該盡量減少(shao)默(mo)認data的大小，以及減少(shao)對象內的自定義(yi)屬性。有(you)圖有(you)真(zhen)相：

以一個100個屬性的data對象為測(ce)試(shi)用例，在iphone6上(shang)，頁面的創建時(shi)間會因此增加150ms。

4、組件化方案

微信沒(mei)有提供(gong)小程序(xu)的組(zu)件化方案（相(xiang)信一定在實現(xian)中(zhong)）。但開談不說組(zu)件化，寫再多代碼也枉然。這里演示(shi)一個簡單的組(zu)件化實現(xian)。

以騰訊視(shi)頻播放(fang)頁為例，頁面(mian)定義(yi)如下：

P('play', {
    comps: [
        require('../../comps/player/index'),
        require("../../comps/toast/index")(),
        require("../../comps/topbar/topbar")(),
        require('../../comps/comment/index')(),
        require('../../comps/recommend/index')(),
        require('../../comps/playdesc/index')()
    ],
    onLoad: function (query) {
    }
    ...
}

其中，P()函數是自定義的基類。這(zhe)是一個非常有(you)用(yong)的東西，可以(yi)把所(suo)有(you)通(tong)用(yong)的邏輯都寫在(zai)基(ji)類(lei)里面，包括pv統計(ji)，來源統計(ji)，擴展生命周期函數，實現組件化等。

函數第一個參(can)數是頁面(mian)名稱(cheng)，作為頁面(mian)的key。第二(er)個是page對象，其中(zhong)擴展(zhan)了(le)一個comps數組(zu)，里面(mian)就是所有要加載的組(zu)件。

以播放器組件/comps/player/index.js為例：

module.exports = {
    data: {
        tvp: {
            url: '',
            state: "stop"
        }
    },
    onLoad: function (query) {
    },
    tvpStartPlay: function () {
    }
}

組(zu)件(jian)的(de)定(ding)(ding)義(yi)跟(gen)一(yi)(yi)個普通Page對象一(yi)(yi)模一(yi)(yi)樣，有data屬性，onLoad、onShow等事件(jian)，也有頁面響應的(de)回(hui)調方法。wxml模板里(li)定(ding)(ding)義(yi)的(de)事件(jian)和(he)js事件(jian)一(yi)(yi)一(yi)(yi)對應。

基(ji)類做(zuo)的(de)事情(qing)，就是把這些組(zu)件(jian)對象的(de)屬性和方法復制(zhi)到(dao)Page對象上（淺拷貝）。其(qi)中data屬性會merge到(dao)一起。而(er)微信(xin)預定(ding)義的(de)生命(ming)周期函(han)數（包括自己擴展(zhan)的(de)），則封裝(zhuang)成隊列(lie)按(an)序執(zhi)行。比如當系統調(diao)用onLoad方法時，實際上是執(zhi)行了所有組(zu)件(jian)的(de)onLoad方法，最后再執(zhi)行Page的(de)onLoad。

以上(shang)是代碼(ma)部分(fen)，至于wxml模板和wxss部分(fen)，就要手工import過去了。

wxml：

<import src="/comps/comment/index.wxml" />
<import src="/comps/recommend/index.wxml" />
<import src="/comps/player/index.wxml"/>
<import src="/comps/toast/index.wxml"/>
<import src="/comps/playdesc/index.wxml"/>
<import src="/comps/topbar/index.wxml" />

wxss：

@import "/style/tabbar.wxss";
@import "/comps/player/index.wxss";
@import "/comps/toast/index.wxss";
@import "/comps/comment/index.wxss";
@import "/style/empty.wxss";
@import "/comps/playdesc/index.wxss";

5、其他

雖然小(xiao)程序(xu)(xu)已(yi)經足夠小(xiao)巧，但(dan)啟(qi)動(dong)速(su)度(du)還是(shi)有(you)那么2-3秒，無法做到(dao)秒開(kai)。樓(lou)主(zhu)嘗試對小(xiao)程序(xu)(xu)的(de)啟(qi)動(dong)時(shi)間(jian)做優(you)化(hua)，但(dan)沒有(you)找到(dao)多(duo)少有(you)價值的(de)優(you)化(hua)點。單個頁面的(de)初始化(hua)只(zhi)需要1-2ms。也許大部(bu)分時(shi)間(jian)消耗在了微信(xin)跟服務器端通信(xin)的(de)過程中(zhong)。期待微信(xin)不斷迭代優(you)化(hua)。