小程序跳转页面加载优化
适应场景： 小程序页面跳转redirect/navigate/其它方式
分析： 从用户触发跳转行为到下一个页面onload生命周期函数内时间差会有500ms左右，如果在页面跳转之后进行onload函数内才开始去加载页面数据，那么这500ms左右的时间就浪费了。
改进： 在页面触发跳转行为的处理函数里结合promise预先加载下个页面的数据，并将promise对象缓存，此时页面跳转和加载数据同时进行，到了目标页面再取出缓存的promise对象进行判断和取数据操作。
效果： 跳转页面加载速度提高了600ms。
示例：
代码结构
[图片]
pageManager.js
[代码]// 写在utils里的公用方法
const pageList = {};
module.exports = {
putData:function(pageName, data){
pageList[pageName] = data;
},
getData:function(pageName){
return pageList[pageName];
}
}
[代码]
util.js
[代码]const myPromise = fn => obj => {
return new Promise((resolve, reject) => {
obj.complete = obj.success = (res) => {
resolve(res);
}
obj.fail = (err) => {
reject(err);
}
fn(obj);
})
}
module.exports = {
myPromise : myPromise
}
[代码]
index.js
[代码]// 跳转页面
const {myPromise} = require('../../utils/util');
const pageManager = require('../../utils/pageManager');
page({
data: {
},
onLoad:function(){
},
gotoPageA:function(){
const PromisePageA = myPromise(wx.request)({
url : ''
}).then((res)=>{
return res.data;
})
pageManager.putData('pageA',promisePageA);
wx.navigateTo({
url: 'pages/pageA/pageA'
})
}
})
[代码]
pageA.js
[代码]// 被跳转页面
const util = require('../../utils/util.js');
const pageManager = require('../../utils/pageManager');
const {myPromise} = require('../../utils/util');
Page({
data:{
logs:[]
},
onLoad: function(){
const promisePageA = pageManager.getData('pageA');
if(promisePageA){
const resData = promisePageA.then(
function(data){
},
function(){
console.log("err");
}
)
}
}
})
[代码]
