傳統(tǒng)H5中也可以通過預(yù)加載來提升用戶體驗(yàn)，但在小程序中做到這一點(diǎn)實(shí)際上是可以更簡(jiǎn)單方便卻又更容易被忽視的。

傳統(tǒng)H5在啟動(dòng)時(shí)，page1.html 只會(huì)加載 page1.html 的頁面與邏輯代碼，當(dāng)page1.html 跳轉(zhuǎn)至 page2.html 時(shí)，page1 所有的 Javascript 數(shù)據(jù)將會(huì)從內(nèi)存中消失。page1 與 page2 之間的數(shù)據(jù)通信只能通過 URL 參數(shù)傳遞或者瀏覽器的 cookie，localStorge 存儲(chǔ)處理。

小程序在啟動(dòng)時(shí)，會(huì)直接加載所有頁面邏輯代碼進(jìn)內(nèi)存，即便 page2 可能都不會(huì)被使用。在 page1 跳轉(zhuǎn)至 page2 時(shí)，page1 的邏輯代碼 Javascript 數(shù)據(jù)也不會(huì)從內(nèi)存中消失。page2 甚至可以直接訪問 page1 中的數(shù)據(jù)。

最簡(jiǎn)單的驗(yàn)證方式就是在 page1 中加入一個(gè) setInterval(function () {console.log('exist')}, 1000)。傳統(tǒng)H5中跳轉(zhuǎn)后定時(shí)器會(huì)自動(dòng)消失，小程序中跳轉(zhuǎn)后定時(shí)器仍然工作。

小程序的這種機(jī)制差異正好可以更好的實(shí)現(xiàn)預(yù)加載。通常情況下，我們習(xí)慣將數(shù)據(jù)拉取寫在 onLoad 事件中。但是小程序的 page1 跳轉(zhuǎn)到 page2，到 page2 的 onLoad 是存在一個(gè) 300ms ~ 400ms 的延時(shí)的。如下圖：

因?yàn)樾〕绦虻奶匦裕耆梢栽?page1 中預(yù)先拿取數(shù)據(jù)，然后在 page2 中直接使用數(shù)據(jù)，這樣就可以避開 redirecting 的 300ms ~ 400ms了。如下圖：

在官方demo中加入兩個(gè)頁面：page1，page2

1. // page1.js 點(diǎn)擊事件中記錄開始時(shí)間
2. bindTap: function () {
3.  wx.startTime = +new Date();
4.  wx.navigateTo({
5.  url: '../page2/page2'
6.  });
7. }
8.  
9.  
10. // page2.js 中假設(shè)從服務(wù)器拉取數(shù)據(jù)需要500ms
11. fetchData: function (cb) {
12.  setTimeout(function () {
13.  cb({a:1});
14.  }, 500);
15. },
16. onLoad: function () {
17.  wx.endTime = +new Date();
18.  this.fetchData(function () {
19.  wx.endFetch = +new Date();
20.  console.log('page1 redirect start -> page2 onload invoke -> fetch data complete: ' + (wx.endTime -wx.startTime) + 'ms - ' + (wx.endFetch - wx.endTime) + 'ms');
21.  });
22. }

重試10次，得到的結(jié)果如下：

對(duì)于上述問題，WePY 中封裝了兩種概念去解決：

• 預(yù)加載數(shù)據(jù)
  用于 page1 主動(dòng)傳遞數(shù)據(jù)給 page2，比如 page2 需要加載一份耗時(shí)很長(zhǎng)的數(shù)據(jù)。我可以在 page1 閑時(shí)先加載好，進(jìn)入 page2 時(shí)直接就可以使用。
• 預(yù)查詢數(shù)據(jù)
  用于避免于 redirecting 延時(shí)，在跳轉(zhuǎn)時(shí)調(diào)用 page2 預(yù)查詢。

擴(kuò)展了生命周期，添加了onPrefetch事件，會(huì)在 redirect 之時(shí)被主動(dòng)調(diào)用。同時(shí)給onLoad事件添加了一個(gè)參數(shù)，用于接收預(yù)加載或者是預(yù)查詢的數(shù)據(jù)：

1. // params
2. // data.from: 來源頁面，page1
3. // data.prefetch: 預(yù)查詢數(shù)據(jù)
4. // data.preload: 預(yù)加載數(shù)據(jù)
5. onLoad (params, data) {}