微信小程序应用的开放已经是当下最热门的话题。 下面将从各个方面谈谈微信小程序应用打开缓慢怎么办？ 附上解决方案相关内容。

关于小程序的科普文​​章已经有很多了。 今天我就来说说小程序的优化方法，可以有效提高小程序的响应速度和用户体验。 当然，开发体验也提升了很多。

1.提高页面加载速度

在小程序环境下，如何提高页面加载速度？ 这是个大问题。 让我详细解释一下这个问题。 如何缩短用户点击链接到打开新页面的时间？ 这里有一个核心关键点：

从页面响应用户的点击行为，开始跳转，到触发新页面事件，是有一个延迟的，这个延迟在100-左右（响应比ios慢）。

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

知道有这个差距，那么代码该如何实现呢？

说白了就是实现一个将B页面的数据预加载到A页面的功能。但是这种跨页面调用很容易使逻辑复杂化，将不同页面的逻辑耦合在一起。 因此，我们希望将预加载逻辑隐藏起来，不增加任何页面间耦合和开发复杂度。

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

小程序首页：当用户点击海报图片时，会执行以下代码（仅一行）：

接下来程序会加载播放页面：播放页面主要代码：

可以看到，无论是外部页面的调用还是实际逻辑的实现都非常简单。 在第二个页面中，我们扩展了Page的生命周期功能，添加了方法。 该方法在页面即将创建但尚未创建时执行。

老司机可能会觉得这有点奇怪。 当点击主页时，根本不会创建播放页面，并且对象也不存在。 如何访问里面的方法呢？

这里我们就来说说微信的页面机制。

当小程序启动时，所有对Page()方法的调用都会被存储在一个队列中（如下图所示）。 每次访问页面时，微信都会重新创建一个新的对象实例（实际上是深拷贝）。

也就是说，当页面A正在执行点击响应事件时，页面B的实例还没有创建，此时调用的方法实际上是Page对象的原型（小程序启动时创建的） 。

而即将创建的B页面又是另外一个。 因此，and方法中，this指针指向的不是同一个对象，当前body中不能存储临时数据。 所以我们封装了一对全局缓存方法$put()和$take()。

为了一般性，Page 上使用的公共方法，例如 $、$put 和 $take 都定义在 Page 基类中。 基类还同时保存了所有页面的列表，以便根据页面名称调用特定页面的方法。 当然，并不是每个页面都需要实现一个方法。 对于那些没有定义方法的人，$函数将跳过预加载链接并直接跳转到页面。 所以对于开发者来说，无需关心其他页面实现了什么，对外界完全透明。

2. 用户行为预测

上面的例子中，我们实现了用户主动点击页面并提前加载下一页数据的方法。 在某些场景下，用户的行为是可以预测的微信小程序开发视频预加载，我们可以在用户点击之前预加载下一页的数据。 让下一页秒级打开，进一步提升体验的流畅度。

继续以腾讯视频小程序为例，主界面分为三页卡（大部分小程序都是这样设计的），通过简单的数据分析发现，进入首页的用户有50%会访问第二页卡。 因此，预加载第二页卡的数据可以大大提高用户下次点击页面的打开速度。

还是那句话，先看代码实现。 首页预加载频道页面的姿势：

频道页面的实现方法：

和第一个例子类似，这里定义了一个$()方法，并且给Page扩展了一个事件。 页面调用$()后，基类会自动找到页面对应的函数，并通知页面执行预加载操作。 与第一个例子不同的是，这里会保存预加载的数据，因为用户可能不会立即访问页面，而将数据保存在全局变量中会增加小程序占用的内存。 微信会毫不犹豫的杀掉占用内存过多的小程序。

或许对于大多数有app开发经验的同学来说，更常见的做法是让页面先显示上次缓存的数据，然后实时拉取新数据，然后刷新页面。 这种方法在小程序上可能体验不太好，因为小程序的性能和页面渲染速度不如原生应用。 将大量数据传输到UI层是一个繁重的操作。 因此不推荐这种方法。

3.减小默认数据的大小

刚才提到，微信在页面打开新页面时，会深拷贝一个页面对象。 因此，应尽可能减少对象中默认数据和自定义属性的大小。 有图有真相：

以具有100个属性的数据对象作为测试用例，页面的创建时间会相应增加。

4. 组件方案

微信没有提供小程序的组件化方案（我认为必须实现）。 但如果不讲组件化，代码写再多也没用。 这里演示了一个简单的组件化实现。

以腾讯视频播放页面为例，页面定义如下：

其中，P()函数是自定义基类。 这是一个非常有用的东西，可以在基类中编写所有通用逻辑，包括pv统计、源统计、扩展生命周期函数、组件化等。

函数的第一个参数是页面名称，用作页面的键。 第二个是页面对象，它扩展了一个数组，其中包含所有要加载的组件。

以播放器组件 ///.js 为例：

组件的定义和普通的 Page 对象一模一样，有数据属性、事件、以及页面响应的回调方法。 wxml模板中定义的事件与js事件一一对应。

基类所做的就是将这些组件对象的属性和方法复制到Page对象中（浅复制）。 数据属性将在一起。 微信预定义的生命周期函数（包括自扩展的）被封装到队列中并顺序执行。 比如系统调用一个方法的时候，实际上是执行了所有组件的方法，最终执行的是Page。

以上是代码部分，至于wxml模板和wxss部分，还得手动完成。

wxml:

wxss:

5、其他

虽然小程序足够小，但启动速度依然是2-3秒，秒都打不开。 楼主尝试优化小程序的启动时间，但并没有发现很多有价值的优化点。 单个页面的初始化仅需1-2ms。 或许大部分时间都花在了微信和服务器通信的过程中。

幸运的是，腾讯提供了一个可以独立进行服务器性能测试的环境。 用户只需要填写域名和一些简单的参数就可以知道自己的服务器性能。 目前在腾讯平台免费使用。

第二部分：如何开一家小商店