小程序跳转页面加载优化
发布于 5 年前 作者 qianxiuying 760 次浏览 来自 分享

适应场景: 小程序页面跳转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 回复

思路很棒

在Android上效果显著!

不够稳定啊

这个数据是如何统计的

可维护性不一定差吧,封装一个小而美的库,比如把navigateTo封装一个通用的函数,例:api.navigateWithDataTo(’/pages/xxx/xxx’, ‘http://数据.com’),

再到下一个页面的时候,代理一下onload,这样就既可以用作者的这种方案,维护性也会好不少啦

可维护性太差了

很棒,是一种思路,除了维护性比较差之外

回到顶部