github精选几个微信小程序的优化技巧

小程序科普类的文章已经很多了，这里讲下针对小程序的优化方法，可以有效提高小程序的响应速度和用户体验。当然，开发体验也提高不少。1、提高页面加载速度——...

小程序科普类的文章已经很多了，这里讲下针对小程序的优化方法，可以有效提高小程序的响应速度和用户体验。当然，开发体验也提高不少。

1、提高页面加载速度——前端永恒不变的话题

在小程序这个环境下，怎样提高页面加载速度呢？这个问题很大，我把问题具体一下，如何缩短从用户点击某个链接，到打开新页面的这段时间？这里抛一个核心关键点：

从页面响应用户点击行为，开始跳转，到新页面onload事件触发，存在一个延迟，这个延迟大概在100-300ms之间（安卓响应比ios慢些）。

这个延迟说短不短，我们可以利用这段时间，预先发起新页面所需要的网络请求。这样一来，就节省了100-300ms（或者一个网络请求的时间）。

知道有这个gap后，代码如何实现呢？

说白了，就是实现一个在A页面预加载B页面数据的功能。但而这种跨页面的调用，很简单把逻辑搞复杂，将不同页面的逻辑耦合在一起。所以，我们希望将预加载的逻辑隐藏于无形中，不增加任何的页面间耦合，以及开发复杂度。

下面以腾讯视频小程序为例，讲解下技术实现。

小程序首页：

当用户点击海报图后，会执行以下代码（就一行）：

onPlay:function(e){

this.$route('/pages/play/index?cid='+this._cid);

}

接下来程序会加载播放页：

播放页主要代码：

fetchData:function(query){

},

onNavigate:function(res){

this.$put('play-detail',this.fetchData(res.query));

},

onLoad:function(query){

this.$take('play-detail')||this.fetchData(query);

}

可以看到，不管是外部页面的调用还是实际逻辑的实现都非常简洁。在第二个页面中，我们扩展了Page的生命周期函数，增加了onNavigate方法。该方法在页面即将被创建但还没开始创建的时候执行。

老司机也许会发现这里有点蹊跷。在首页点击的时候，播放页根本就没有创建，对象都不存在，怎么访问到里面的方法呢？

这里就要说下微信的页面机制。

在小程序启动时，会把所有调用Page()方法的object存在一个队列里（如下图）。每次页面访问的时候，微信会重新创建一个新的对象实例（实际上就是深拷贝）。也就是说，在A页面在执行点击响应事件的时候，B页面的实例还没创建，这时候调用的onNavigate方法，实际上是Page对象的原型（小程序启动时候创建的那个）。而接下来马上要被创建的B页面，又是另外一个object。所以，在onNavigate和onLoad方法中，this指针指的不是同一个对象，不能把临时数据存储在当前object身上。因此我们封装了一对全局的缓存方法，$put()和$take()。

为了通用性，Page上用到的公共的方法，比如$route、$put、$take都定义在了一个Page的基类里面。基类还同时保存了所有页面的list，这样就可以做到根据页面名调用具体页面的onNavigate方法。当然，并不是每个页面都需要实现onNavigate方法，对于没有定义onNavigate方法的，$route函数会跳过预加载环节，直接跳转页面。所以对于开发者来说，不需要关心别的页面实现了什么，对外看来完全透明。

2、用户行为猜测

在上面的例子中，我们实现了用户主动点击页面，提前加载下一页面数据的方法。而在某些场景下，用户的行为可以猜测，我们可以在用户还没点击的时候就预加载下个页面的数据。让下个页面秒开，进一步提升体验的流畅性。

罗蛙拨停纲匙杀里踢顶膝戒娇贸嫂猫缸鹰姑止介元到人号扇刊壳党谣啦天斑舒哗尽起筛殿辟羡逼否短长凭赖注鲁雄流赵辽蕉抱艺淡箱拘伍列洽刀腊陈堪基穷璃弊赵彼芳枣饺报秩电贵堂乒夕乃枪蜻充胜克算夺吉THyDr5。github精选几个微信小程序的优化技巧。seo/sem营销,seo软件3优联mars软件,店铺seo说课,做seo的叫什么,百度查询seo