小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇
小程序性能优化之页面预加载方案 集成篇
转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725
前言
之前看到一篇文章,《微信小程序之提高应用速度小技巧》,是讲如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。这种技术,可以缩短用户的等待时间,极大的提升用户的使用体验。但是那篇文章中只是讲述了技术原理,并没有实际教大家如何编写,那么今天我来具体的讲下这个技术实现方式。
框架优缺点
优点:
- 预加载下一个页面的数据,提高了页面的加载速度,轻量级的协议(200~300ms左右就能接收到数据)能轻松让小程序页面打开后数据瞬间加载,几乎不出现空页面。
- 让同种业务的代码保持在一个类中,不会破坏项目结构。
- 代码量非常少,对原本业务影响非常少。
- 实现预加载后想删掉预加载?只需在实现的类中删除一个字符串即可。
缺点:
- 需要你按情况替换
setData
为$setData
- 需要开发者非常清楚各情况下的上下文是什么。
- 如果你的协议非常耗时,达到400ms以上的,使用这种优化方式效果就不明显了。
- 有网友发现,这个项目
无法运行在使用了组件的小程序中
,所以大家如果使用了组件
的话,就不要直接
用这个项目 了。不过还是推荐你吸收下这个项目的思想,毕竟工程师在工作中思想是很重要的。
当然,还是先给大家看下具体的效果。
最终效果
这里展示的是一条协议总时间是300ms的加载效果。这里是用setTime()来模拟的。一个是今天要介绍的预加载方式(跳转前就开始请求协议)和普通加载方式(跳转后才开始请求协议),可以看到,普通加载方式,在跳转页面成功后,页面会先空,后有数据;而预加载方式一进到页面就有数据。这里主要是用Android手机来测试的(型号是魅族pro6),点击按钮时是有点击态的,但是颜色太浅,淡蓝色,不容易看出来。这个点击态在预加载方案中的地位是非常重要的!!
- 预加载方式
- 普通加载方式
如何集成
重要声明:我的小程序是遵循ES6标准写的,里面用了class
extends
及解构赋值等,如果看不懂的话,请学习下ES6!!如果你的项目是用的ES5,那就仔细阅读后续文章,体会预加载技术的核心思想,如果核心思想理解了,分分钟写一个出来,对吧 ~ ~
首先,你要有个基类CommonPage
小程序中的每一个Page
类都继承该基类,这样的话才方便统一管理。
比如下面的IndexPage
页面
// pages/index/index.js
import CommonPage from "../CommonPage";
class IndexPage extends CommonPage {constructor(...args) {super(...args);this.data = {testStr: 'this is the firstPage'}}onLoad(options) {}
}Page(new IndexPage());
IndexPage
是第一个页面,不需要预加载,SecondPage
是第二个页面,我们来模拟下SecondPage
的预加载方式。
接下来看到的this.$route() this.$put() this.$take() this.$resolve() this.$reject()
等带$
符号的都是基类中实现的方法。
1. 给IndexPage
页面添加跳转按钮。
<!--index.wxml-->
<view class="container"><view bindtap="toSecondPage" hover-class="press-style" class="normal-style" hover-stay-time="100"> 闪电加载第二个页面</view><view>300毫秒 闪电加载方式</view>
</view>
注意:这里添加的class="normal-style" hover-stay-time="100"
是非常重要的,如果不添加点击态,会很影响体验。
2. 给IndexPage
页面添加预加载专用跳转方式。
toSecondPage = function () {// this.$route是预加载的页面跳转方式,以wx.navigateTo方式跳转。这个方法是在CommonPage中实现的。this.$route({path: '../second/second', query: {count: 10, title: '这是第二个页面'}, clazzName: 'SecondPage'});// 这是小程序原生的普通加载方式// wx.navigateTo({// url: '../second/second?count=10&title=这是第二个页面'// })}
this.$route({path, query, clazzName});
这个方法的参数含义是:
- path:页面路径,支持绝对路径和相对路径。
- query:需要传递的参数。这是一个
object
类型的。 - clazzName:需要跳转的页面的类名。这个介绍
SecondPage
时再说。
其实你可能会问,既然有path了,为什么还要clazzName?这个问题会在介绍技术原理时详细说,那是下一篇的事儿了。
到这里,如果你也是用ES6的规范来实现类的,可以看到,在IndexPage
中,你只需将跳转方式修改为this.$route({path, query, clazzName});
即可。
3. 给SecondPage
页面添加预加载专用的初始化方法。
// pages/second/second.js
import CommonPage from "../CommonPage";
class SecondPage extends CommonPage {constructor(...args) {//super(...args)一定要写,他会将clazzName与下面的data进行合并。super(...args);//这个$init(obj)中注入的obj就是页面初始时的datasuper.$init({arr: []});}$onNavigator(query) {//这里的query是从this.$route中传递来的queryconsole.log('闪电️加载时接收到的参数', query);this.$put('second-data', this.initData.bind(this), query);};initData = function (query, resolve, reject) {//这里的query是在this.$put()中传递过来的//resolve在协议成功时回调//reject在协议失败时回调//模拟网络请求setTimeout(() => {if (typeof query.count === "string") {query.count = parseInt(query.count);}this.data.arr.splice(0, this.data.arr.length);for (let i = 0; i < query.count; i++) {this.data.arr.push({id: i, name: `第${i}个`, age: parseInt(Math.random() * 20 + i)})}this.$setData(this.data);this.$resolve(this.data);//或者 resolve(this.data);只有调用了resolve或者reject方法,才能在this.$take()的then()方法中获取到值。}, 300);};onLoad(options) {const lightningData = this.$take('second-data');if (lightningData) {lightningData.then((data) => {//成功回调,resolve(data)调用时触发 data就是resolve传递的参数this.$setData(data);},(data, error)=>{//失败回调,reject(data, error)调用时触发,data和error是reject传递的参数。});return;}this.initData(options);}
}
//这里注入的clazzName: 'SecondPage',与this.$route({path, query, clazzName});中的clazzName名称与其一致即可
Page(new SecondPage({clazzName: 'SecondPage'}));
大概是这么几步:
- 这个类需要在
new
时,将clazzName
注入,this.$route({path, query, clazzName});
中的clazzName
名称与其一致即可。 - 需要在
SecondPage
中注入新的生命周期函数,也就是预加载方法。在执行this.$route
时,你在this.$route
中传递的clazzName
是什么,这个框架就会自动去找匹配一致的类,调用该类的$onNavigator
方法。 - 在
$onNavigator
中调用this.$put(key,fun,query)
参数分别是键、异步请求方法、异步请求方法的参数。 - 在异步请求方法将
this.setData
替换为this.$setData()
,使用this.$resolve(data)
或者this.$reject(data,error)
来回调成功或失败。 - 在
onLoad
中使用this.$take(key).then(success,fail)
来获取异步结果,分别对应了resolve
和reject
回调。如果你没有使用预加载,或者预加载失败,那么this.$take(key)
方法返回空,由此可以判断是否使用了预加载进入页面!
这么做的话,实现了在跳转前先把下一个页面的协议发出去,而且还让同种业务的代码保持在一个类中,不会破坏项目结构!
在实现了预加载后,如果不想用预加载了,只需要删掉new SecondPage()
时注入的clazzName
即可!
CommonPage
中的相关代码,在这篇中我就不讲了。想了解原理的话,请看下一篇文章小程序性能优化之预加载方案 进阶篇
GitHub源码地址:
小程序预加载技术源码
感谢这篇文章:
微信小程序之提高应用速度小技巧
小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇相关推荐
- 小程序性能优化之页面预加载方案——让你的小程序运行如飞 进阶篇
小程序性能优化之页面预加载方案 进阶篇 转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面 预加载方案 ...
- 不加载执行js_前端性能优化:preload 预加载页面资源
网上看到一篇来自蚂蚁金服数据体验团队的文章,觉得不错,分享给大伙:https://juejin.im/post/5a7fb09bf265da4e8e785c38 本文主要介绍preload的使用,以及 ...
- 前端性能优化--预加载技术
当我们谈到前端的性能时,总是会提到比如合并.压缩.缓存或者在服务器上开启gzip之类的,目的都是为了让页面加载的更快. 资源预拉取(prefetch)则是另一种性能优化的技术.通过预拉取可以告诉浏览器 ...
- ios 微信浏览器 预加载_小程序页面预加载技术
lightning-load-project 集成方式 看不效果览图的话,请看博客 https://blog.csdn.net/sinat_27612147/article/details/80802 ...
- 微信小程序 # 图片预加载方案(防闪烁) 以及 首次引导
问题背景 第一次进入小程序的时候,需要打开引导操作 点击进入下一个引导操作,一共有一系列引导操作. 引导操作这里是用图片实现的,然后点一下切换一张图片. 问题具体描述 在如上图所示的引导提示操作中,用 ...
- 性能优化——图片压缩、加载和格式选择
本文首发于政采云前端团队博客:性能优化--图片压缩.加载和格式选择 https://www.zoo.team/article/images-compress 前言 相信大家都听说过 "258 ...
- vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...
- html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
- 纯web项目不能使用mui.preload进行页面预加载的解决办法
首先: 纯web项目不能使用mui.preload进行页面预加载的, 比如[基于微信的web项目](http://ask.dcloud.net.cn/question/20644) 怎么办呢? 自己写 ...
最新文章
- 浙大吴飞教授:尽管AlphaGo Zero已强大到从经验中学习模型,我也绝不赞同马斯克和霍金的威胁论,人才是智能的最终主宰
- 统计学习方法 第一章 学习笔记
- 时间复杂度、渐进记法、主定理
- Clickhouse 在腾讯的应用实践
- mac 设置mysql开机自启动
- 通俗讲解:图像傅里叶变换
- MySQL日期时间函数大全(转)
- 【转】一句话的设计模式
- 同事操作两个数据源保持事务一致_终于有人把分布式事务说清楚了
- c++ 模糊搜索 正则表达式_c++使用正则表达式提取关键字的方法
- CTF SQL注入知识点
- Dell交换机在配置中应注意的几个问题!
- 一个具自我复制功能的程序
- Python数据可视化之Pygal(雷达图)
- 密码输入页面的实现-模仿支付宝
- 一分钟了解阿里云产品:弹性伸缩五大热点技术问题分析
- 腾讯开发微信花了多少钱?真的技术难度这么大吗?难点在哪里?
- 关于C和C++中的基本数据类型int、long、long long、float、double、char、string的大小及表示范围
- 3道常见的SQL笔试题,你要不要来试试!
- 从turtlesim到贪吃蛇……
热门文章
- java 调接口 超时处理_接口调用超时的实现原理
- html jquery 模板引擎,jquery template.js前端模板引擎
- v-for在表格标签的tr标签里不能用
- mac 触控板 右键
- java怎么完成输出语句
- 【微信小程序】微信小程序开发--用户昵称中带有emoji表情的处理方法
- 图像检测系列之(12)异常检测(13)拼接伪造(14)deepfake | ICCV2021生成对抗GAN汇总梳理...
- 李开复离开微软的真实原因
- 值得推荐的Python IDE集成开发工具
- 网络视频流媒体技术大全