原理

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

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

小程序在啟動(dòng)時(shí)，會(huì)直接加載所有頁(yè)面邏輯代碼進(jìn)內(nèi)存，即便 page2 可能都不會(huì)被使用。在 page1 跳轉(zhuǎn)至 page2 時(shí)，page1 的邏輯代碼 Javascript 數(shù)據(jù)也不會(huì)從內(nèi)存中消失。page2 甚至可以直接訪(fǎng)問(wèn) 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ù)拉取寫(xiě)在 onLoad 事件中。但是小程序的 page1 跳轉(zhuǎn)到 page2，到 page2 的 onLoad 是存在一個(gè) 300ms ~ 400ms 的延時(shí)的。如下圖：

圖片描述

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

圖片描述