小程序跳转页面加载优化
适应场景: 小程序页面跳转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");
}
)
}
}
})
7 回复
可维护性不一定差吧,封装一个小而美的库,比如把navigateTo封装一个通用的函数,例:api.navigateWithDataTo(’/pages/xxx/xxx’, ‘http://数据.com’),
再到下一个页面的时候,代理一下onload,这样就既可以用作者的这种方案,维护性也会好不少啦