评论

小程序跳转页面加载优化

在小程序的跳转页面做一个小优化, 有效提高了小程序跳转页面的加载速度

适应场景: 小程序页面跳转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");
                }
            )
        }
    }
})
最后一次编辑于  2019-10-31  
点赞 4
收藏
评论

8 个评论

  • 2019-11-01

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

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

    2019-11-01
    赞同 5
    回复
  • 永恒的心
    永恒的心
    2019-11-02
    不够稳定啊
    2019-11-02
    赞同 1
    回复
  • Yunior
    Yunior
    2019-11-01

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

    2019-11-01
    赞同 1
    回复
  • 安
    2020-08-07

    为什么附近小程序不展示没人管?https://developers.weixin.qq.com/community/develop/doc/0008ca741787a0ff3cca53b5757800

    2020-08-07
    赞同
    回复
  • 耿霄
    耿霄
    2019-11-06

    这个数据是如何统计的

    2019-11-06
    赞同
    回复
  • 梧桐树
    梧桐树
    2019-11-01

    思路很棒

    2019-11-01
    赞同
    回复
  • 西赛德李
    西赛德李
    2019-11-01

    在Android上效果显著!

    2019-11-01
    赞同
    回复
  • wiki
    wiki
    2019-10-31

    可维护性太差了

    2019-10-31
    赞同
    回复
登录 后发表内容