如何巧妙解决小程序缓存问题,这5点你都知道吗?

一、什么是小程序缓存,它是怎么产生的呢?

1.开发者工具上的缓存:

清除缓存是我们开发者经常做的一个操作,我们需要在判断客户端在缺少缓存数据的情况下做出相应的处理

2.数据缓存:

数据缓存指的就是我们存在storage里面的缓存数据,也就是调用`getStorage`和`setStorage`这两种API所存储和获取到的缓存数据。

3.文件缓存:

指的是在wxml、wxss、js引入的一些网络文件,这些文件会进行缓存。

小程序播放音乐之后在手机文件夹中有缓存,目前是30天有效期,会自动清理。

4.授权数据:

授权数据指的是用户授权的一些状态,授权列表如下

5.网络缓存:

为了能用户有更好的使用体验,我们一般会设置网络缓存,将通过请求服务器得到的数据缓存到本地。

网络缓存也可以减少一定的网络请求,从而减轻服务器的压力。简单理解就是request得到的一些网络数据。

6.登录状态:

迫使session_key过期,从而需要重新登录。需要用wx.login得到的code去后台重新换取新的sessionid。

小程序启动流程图:

在小程序启动时,微信会为小程序展示一个固定的启动界面,界面内包含小程序的图标、名称和加载提示图标。此时,微信会在背后完成几项工作:下载小程序代码包、加载小程序代码包、初始化小程序首页。

(想了解更多行业小程序解决方案么?点击链接查看https://market.cloud.tencent.com/stores/1251619298

二、工程师面对小程序缓存应该做什么

1.缓存限制和隔离:

小程序宿主环境会管理不同小程序的数据缓存,不同小程序的本地缓存空间是分开的,每个小程序的缓存空间上限为10MB,如果当前缓存已经达到10MB,再通过wx.setStorage写入缓存会触发fail回调。

小程序的本地缓存不仅仅通过小程序这个维度来隔离空间,考虑到同一个设备可以登录不同微信用户,宿主环境还对不同用户的缓存进行了隔离,避免用户间的数据隐私泄露。

由于本地缓存是存放在当前设备,用户换设备之后无法从另一个设备读取到当前设备数据,因此用户的关键信息不建议只存在本地缓存,应该把数据放到服务器端进行持久化存储。

官方关于缓存的一些介绍:

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a2c7c9f4a981b0086bd31e5b40a&highline=%E7%BC%93%E5%AD%98

2.利用本地缓存提前渲染界面:

讨论一个需求:我们要实现了一个购物商城的小程序,首页是展示一堆商品的列表。一般的实现方法就是在页面onLoad回调之后通过wx.request向服务器发起一个请求去拉取首页的商品列表数据,等待wx.request的success回调之后把数据通过setData渲染到界面上,如下代码所示。

设想一下当用户退出小程序再进来,界面仍然会有白屏现象,因为我们需要等待拉取商品列表的请求回来才能渲染商品列表。当然我们还可以再做一些体验上的优化,例如在发请求前,可能我们会在界面上显示一个Loading提示用户在加载中,但是并没有解决这个延迟渲染的现象,这个时候我们可以利用本地缓存来提前渲染界面。

我们在拉取商品列表后把列表存在本地缓存里,在onLoad发起请求前,先检查是否有缓存过列表,如果有的话直接渲染界面,然后等到wx.request的success回调之后再覆盖本地缓存重新渲染新的列表,如下代码所示。

这种做法可以让用户体验你的小程序时感觉加载非常快,但是你还要留意这个做法的缺点,如果小程序对渲染的数据实时性要求非常高的话,用户看到一个旧数据的界面会非常困惑。因此一般在对数据实时性/一致性要求不高的页面采用这个方法来做提前渲染,用以优化小程序体验。

(想了解更多行业小程序解决方案么?点击链接查看https://market.cloud.tencent.com/stores/1251619298

三、小程序如何清理缓存:

可以尝试直接删除小程序,达到缓存清理的目的。

具体的删除方法是:

iOS 微信:进入微信中的「发现」-「小程序」,将不想要的小程序从右往左划动,然后点击红色的「删除」按钮即可。

Android 微信:进入微信中的「发现」-「小程序」,长按不想要的小程序,然后点击「删除」按钮即可。

需要注意的是,删除小程序,会将对应小程序的本体、本地数据以及权限偏好删除,但不会删除小程序服务器上的数据。

也就是说,删除小程序后,你将永久丢失小程序中未备份、未上传的数据。在删除小程序之前,记得做好备份工作喔。

删除之后,如果想再次使用这个小程序,只需重新搜索、扫码,再打开小程序,就可以了。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

js的动态加载、缓存、更新以及复用(三)

总体思路 1、  建立一个js服务,该服务实现通用js文件的加载、依赖、缓存、更新以及复用。 2、  各个项目如果使用通用js,可(bi)以(xu)使用js服务...

3719
来自专栏技术翻译

如何在微服务之间共享和同步代码

微服务架构非常适合构建可扩展的代码库,具有更少的耦合,更好的关注点分离,更高的弹性,结合不同的技术,最重要的是,更好的模块化和构建它的组件的可重用性。

2580
来自专栏zhisheng

听说你要做网站

现代 Web 后端技术超入门 引言 现在房价这么高,作为一个程序员只能靠做个网站看能不能卖出 100 万这样搏一手了。这里尝试介绍一下现代 Web 后端并解释一...

3728
来自专栏乐享123

Freeze Svn:externals for Tags/branch

4106
来自专栏代码小睿

一句命令快速合并 JS、CSS

  在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多。   而项目上线后...

5019
来自专栏软件

GitHub快速入门图文全面详解

?tub程序员必须要会 作者:AWeiLoveAndroid 博客:https://www.jianshu.com/u/f408bdadacce 文章目录 入门...

2058
来自专栏marsggbo

coursera 视频总是缓冲或者无法观看的解决办法

注意!!!该方法针对Windows用户,亲测有效。 1.用管理员权限记事本打开host文件 2.将如下内容复制到文件末尾 52.84.246.90 ...

2275
来自专栏Laoqi's Linux运维专列

自动化监控Zabbix之主机自动发现

1873
来自专栏程序猿DD

Spring Cloud Config采用Git存储时两种常用的配置策略

这种模式下不同的项目会对应到 https://github.com/dyc87112/config-repo.git仓库下的不同目录,如果项目中 spring....

942
来自专栏老安的博客

docker 容积硬盘扩容小坑一个

1363

扫码关注云+社区

领取腾讯云代金券