問題

因?yàn)槲覀冇械捻撁媸窃趏nload中去請(qǐng)求數(shù)據(jù)回來再渲染視圖，如果我們可以將請(qǐng)求數(shù)據(jù)這一步提前到小程序頁面跳轉(zhuǎn)前做，就可以早一點(diǎn)把數(shù)據(jù)請(qǐng)求回來，優(yōu)化的效果取決于頁面跳轉(zhuǎn)所需的時(shí)間。

需求

需要一種請(qǐng)求前置方法充分利用跳轉(zhuǎn)的時(shí)間，預(yù)先請(qǐng)求接口數(shù)據(jù)，但是要盡量減少對(duì)舊項(xiàng)目的改造成本。因?yàn)楝F(xiàn)在我負(fù)責(zé)的小程序項(xiàng)目是用axios來請(qǐng)求接口數(shù)據(jù)，所以這里只舉例axios中post的改造的思路。我這里是通過改寫post方法，在請(qǐng)求的時(shí)候?qū)π枰A(yù)先請(qǐng)求的接口進(jìn)行緩存，等第二次請(qǐng)求的時(shí)候返回第一次請(qǐng)求的promise，從而不用再發(fā)起新請(qǐng)求。

具體步驟

1、改造post方法

http文件

let instance = axios.create({ // 創(chuàng)建axios請(qǐng)求實(shí)例
 // 省略部分代碼
});

let { post } = instance; // 保存原本的post方法
let cache = {}; // 請(qǐng)求緩存

instance.post = function(...list) {

 let [url, data = {}] = list;

 if (cache[url]) { // 返回預(yù)請(qǐng)求的promise
 let pre = cache[url];
 delete cache[url];
 return pre;
 }

 if (data.pre) { //以pre作為是否是預(yù)請(qǐng)求
 delete data.pre;
 cache[url] = post(...list)
 return cache[url];
 }

 return post(...list); //普通的請(qǐng)求
}

2、使用

跳轉(zhuǎn)前的頁面，即上一個(gè)頁面

// 省略部分代碼 ...

// 這是在下個(gè)頁面要去請(qǐng)求接口的數(shù)據(jù)，提前在wx.navigateTo跳轉(zhuǎn)前請(qǐng)求，并存儲(chǔ)下來。
$http.post('/act/activities/lucky:search', { activityId: 12 , pre: true })

wx.nextTick(() => { //使用wx.nextTick是讓上面的請(qǐng)求先發(fā)出再跳轉(zhuǎn)
 wx.navigateTo({
 url: `${TYPE_TO_ROUTE_MAP[templateType]}?id=${activity.activityId}`
 });
})

// 省略部分代碼 ...

效果

未使用預(yù)加載

使用預(yù)加載

兩者紅色框的寬度差，表示的是提前了多少時(shí)間去請(qǐng)求接口數(shù)據(jù)，大概在100ms左右。因?yàn)橄旅娴撵o態(tài)資源地址來自于接口的數(shù)據(jù)，相當(dāng)于減少了堵塞后面資源加載100ms左右。

總結(jié)

• 這個(gè)原理就是利用小程序跳轉(zhuǎn)這部分時(shí)間提前請(qǐng)求數(shù)據(jù)，所以對(duì)于性能差的手機(jī)受益會(huì)大一些，雖然在開發(fā)者工具看起來能省個(gè)100ms左右，但是存在以下兩個(gè)限制
• 頁面加載完成需要預(yù)請(qǐng)求的接口數(shù)據(jù)里的數(shù)據(jù)
• 需要在上一個(gè)頁面發(fā)起預(yù)請(qǐng)求，并對(duì)跳轉(zhuǎn)做nextTick處理

導(dǎo)致這個(gè)優(yōu)化的收益對(duì)整個(gè)項(xiàng)目來說確實(shí)有些雞肋。

到此這篇關(guān)于微信小程序請(qǐng)求前置的文章就介紹到這了,更多相關(guān)小程序請(qǐng)求前置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論