如何解决微信小程序加载慢的问题?
a.提高页面加载速度:
1. 首先用户在页面切换也就是路由跳转时,会有一个100m-300m的一个时间,我们可以利用这个时间段,预先发起新页面所需要的网络加载时间。2.例如从A页面预加载B页面时,我们可以通过在A页面通过this.$route的方法向B页面传递参数,B页面接收到参数之后利用我们封装好的全局put take的方法,利用缓存来进行ajax请求疑难:为什么我在A页面时会访问到B页面的实例呢?此时B页面不是未创建吗?解答:
1.首先根据微信小程序的机制来说,在我们小程序启动时,会把所有的page()方法内的object存在一个队列中,每次页面访问时,就会创建一个新的对象实例,简单理解就是深拷贝。
2.在我们的A页面进行点击响应事件的时候,B页面实例此时未加载,所以此时调用onload方法(onNavigate)方法时,此时this指向还是在page对象的原型,也就是小程序启动时刚创建时的那个实例。
3.而马上被创建好的B页面此时又是另外一个obeject对象,此时this指向不是同一个对象,不能把我们临时的数据存储住,因此我们可以封装一个全局的put take缓存方法进行存储。
4.为了通用性,我们将所有公共的方法 比如put take route都定义在了page这个基类之中,基类同时还保存了所有的list页面,这样就可以根据需求来通过onNavigate方法预加载我们的页面了。哪个页面有onNavigate方法就执行预加载,没有则不执行。
b.用户行为预测:
1.什么是用户行为预测,就是根据用户可能点击某一个界面的机率来预先加载数据,从而实现界面秒开的效果,提高用户的浏览体验。
2.与提高页面加载速度原理大致相同,我们需要给page对象拓展一个方法,在我们每次预载的页面之中调用这个方法,与上一个方法不同的是,本方法的临时数据会储存在storge之中,因为用户有可能不点击这个页面,而把数据全部存储在全局变量中,会影响小程序本身的内存,小程序本身一个也就支持11M的数据。
c.减少默认data的大小:
从一个面跳转到下一个页面时,此时我们跳转后的页面会深拷贝一个page对象,所以我们为了提高性能理应减少data的体积,比如data有100个属性时,就会有一个150ms的延迟。
d.组件化方案:
我们将一些公共的组件一个封装,在我们需要的时候来进行一个组件的调用,提高复用性,避免内存的重复占用。
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置