详解小程序缓存插件(mrc)


Posted in Javascript onAugust 17, 2018

背景

wx.request是小程序提供的API,用于发起网络请求,在频繁并且响应较慢的业务中的请求,页面白屏或者loading时间也相应比较长,然而合理的利用缓存是个很好提升界面响应速度,减少网络资源占用的手段。

mrc提供2种换成模式用于业务中使用

短期缓存

对于实时性要求相对较低的业务场景而言,可以使用短期缓存

短期缓存能够将接口数据在一定时间内缓存起来,在时间范围内再次请求的话,可以直接使用缓存数据,减少白屏或者loading时间。设置不同的缓存时间来适应不同的业务,还可以有效的节约网络资源

快照缓存

类比搜索引擎的快照,针对请求响应较慢的并且实时性又比较高的场景而言,可以使用快照缓存。

快照缓存每次请求都会先返回上一次缓存数据作为结果返回,然后再去请求,等到请求返回之后再更新缓存,业务方可以对比2次返回结果进行局部渲染

使用

mrc以一种侵入式最小的方式封装了原生的resquest API,扩展原生API的功能,可以支持promise以及2种缓存方式。

//app.js

//引入request缓存插件
import Mrc from './dist/mrc.min';

//实例化一个全局引用
App({
 wxp: new Mrc({
  prefix: '___CACHE___',   //选填,存储字段前缀,默认___CACHE___
  timeout: 600000,    //选填,缓存多长时间,单位ms,默认10分钟
 }),
})
//page.js
const app = getApp()
let {wxp} = app
Page({
 data: {

 },
 onLoad: function () {
  wxp.request({
   url: 'http://xxxxxx',
   cache: {
    enable: true,    //选填,是否开启缓存,默认false
    type: 'snapshot',   //选填,开启缓存类型,定时(timeout)、快照(snapshot),默认定时
    timeout: 600000,    //选填,定时缓存时间,使用优先级,当前配置>全局配置>默认配置
   },
  })
   .then((res) => {
    //快照缓存时会多返回一个正式请求的promise对象,用于获取正式请求的数据
    return res.req;
   })
   .then((res) => {
    console.log(res);

   })
 },
})

特性

  1. 缓存类型为快照缓存时,缓存的数据为持久缓存,timeout设置无效
  2. 缓存类型为快照缓存时,第一个then回调会带上正式请求的promise对象,用于下个then回调获取正式请求的数据
  3. 不想使用缓存时(enable=false),一样可以用mrc实例化之后的对象正常请求,支持promise

对比

类型 是否持久化 是否每次都请求 实时性
快照缓存
短期缓存

配合骨架屏来使用效果更佳!!!

详解小程序缓存插件(mrc)

总结

缓存插件的使用可以有效的提升页面打开速度,并且在频繁的网络请求中可以有效的节约服务器资源。具体的调用方式和源码,请看 github ,最后求start

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
Prototype Object对象 学习
Jul 12 Javascript
js中function()使用方法
Dec 24 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
几行js代码实现自适应
Feb 24 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
layui 设置table 行的高度方法
Aug 17 #Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 #Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
layui的table中显示图片方法
Aug 17 #Javascript
layerUI下的绑定事件实例代码
Aug 17 #Javascript
JS实现的视频弹幕效果示例
Aug 17 #Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 #Javascript
You might like
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python简单读取json文件功能示例
2017/11/30 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
技术总监岗位职责
2013/12/05 职场文书
应聘自荐信
2013/12/14 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年林业工作总结
2014/12/05 职场文书
第一军规观后感
2015/06/12 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
入队仪式主持词
2015/07/04 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL