小程序性能优化——文件的本地存储10M优化算法
小程序文件的本地存储优化
优化原因!
众所周知,微信将小程序的本地文件存储空间限制为10M,导致我们在调用wx.saveFile()接口存储临时文件时,存着存着,就超过10M了。那该怎么办呢?
肯定是要写一套算法,避免超过10M啦!
算法来源 ~
之前博主在做Android的时候,了解过LruCache类。它是Android提供的一个缓存类,当缓存空间被占满时,会去移除最不经常访问的数据,从而保证新数据的正常插入。这就是小程序的文件存储算法的思想来源。
当然,LruCache中是使用LinkedHashMap来管理缓存数据的,这个LinkedHashMap可厉害了,它已经实现了按照访问顺序的存储,这就可以让我们在限定的空间满了的时候,方便的移除最不常访问的数据。这就是LruCache实现的思路。
在小程序里,我们的文件是存储在磁盘中的,可以调用wx.getSavedFileList()来获取所有文件在存储时保存的信息。微信官方指出,可以获取到三项内容。
这是我们仅能获取到的文件信息了,里面并没有访问时间的记录。所以针对这仅有的几条信息,我们不能将LruCache的思想硬搬过来,需要有所修改。
针对小程序的文件存储算法
要把大象装冰箱,总共分几步?!在写算法之前,我们先要根据现有资源,因地制宜的制定可行的方案。
- 目前可获取到的资源:
filePath,createTime,size
。 - 要指定一个本地可存储的最大值MAX_SIZE。
那么,在存储一个临时文件时,我制定了下面的算法
移除最旧文件算法
这个算法在资源方面只会用到上面提到的filePath,createTime,size
。
我认为在用户保存文件时,如果空间已经满了,那么最旧的文件是或许是需要被移除的。所以可以依照createTime来移除最旧的文件。
算法核心思想就这么几点:
- 先获取要保存的临时文件的大小信息
tempFileSize
。 - 然后移除本地文件,直到剩余空间大于
tempFileSize
。 - 最后存入文件,返回本地文件路径。
以下是代码
const MAX_SIZE = 10400000;
let wholeSize = 0;
setTimeout(() => {wx.getSavedFileList({success: savedFileInfo => {let {fileList} = savedFileInfo;!!fileList && fileList.forEach(item => {wholeSize += item.size;});}});
});function saveFileRule(tempFilePath, cbOk, cbError) {wx.getFileInfo({filePath: tempFilePath,success: tempFailInfo => {let tempFileSize = tempFailInfo.size;// console.log('本地临时文件大小', tempFileSize);if (tempFileSize > MAX_SIZE) {typeof cbError === "function" && cbError('文件过大');return;}wx.getSavedFileList({success: savedFileInfo => {let {fileList} = savedFileInfo;if (!fileList) {typeof cbError === "function" && cbError('获取到的fileList为空,请检查你的wx.getSavedFileList()函数的success返回值');return;}//这里计算需要移除的文件大小let sizeNeedRemove = wholeSize + tempFileSize - MAX_SIZE;if (sizeNeedRemove >= 0) {//按时间戳排序,方便后续移除文件fileList.sort(function (item1, item2) {return item1.createTime - item2.createTime;});let sizeCount = 0;for (let i = 0, len = fileList.length; i < len; i++) {if ((sizeCount += fileList[i].size) >= sizeNeedRemove) {for (let j = 0; j < i; j++) {wx.removeSavedFile({filePath: fileList[j].filePath,success: function () {wholeSize -= fileList[j].size;}});}break;}}}//存储文件wx.saveFile({tempFilePath: tempFilePath,success: res => {wholeSize += tempFileSize;typeof cbOk === "function" && cbOk(res.savedFilePath);},fail: cbError});},fail: cbError});}});
}module.exports = {saveFileRule
};
在需要移除本地文件时,我是先将fileList按时间戳大小正向排序,这样的话,最旧的文件信息会排在第一位,其余的依次排列。这时只要从fileList的第一个元素开始移除文件就可以了,直到剩余空间可以存入新文件为止。
下面这段代码会在小程序冷启动时执行,我在这段代码中进行了优化。
setTimeout(() => {wx.getSavedFileList({success: savedFileInfo => {let {fileList} = savedFileInfo;!!fileList && fileList.forEach(item => {wholeSize += item.size;});}});
});
因为js单线程原因,setTimeout
会让里面的代码在主线程跑完后再执行,避免小程序冷启动时在这上面耗时。并且对于本地文件总大小的计算,遍历这一次就可以了,以后在执行saveFileRule
时,进行简单的加减就可以了。
小程序性能优化——文件的本地存储10M优化算法相关推荐
- 微信小程序性能优化方案
文章目录 微信小程序性能优化方案 提高加载性能 小程序代码包准备(下载代码包) 开发者代码注入 页面渲染优化 提升渲染性能 setData工作原理 优化方法 微信小程序性能优化方案 微信小程序如果想要 ...
- 微信小程序开发04 性能优化:借助微信开发者工具提升小程序性能
你好,我是周俊鹏. 前几节课我们分别从架构层(双线程模型).链路层(授权模型).和应用层(自定义组件)三个角度学习了小程序的技术要点.它们能帮你完成一个微信小程序的基本业务逻辑和交互逻辑. 逻辑的第一 ...
- 小程序性能优化之页面预加载方案——让你的小程序运行如飞 进阶篇
小程序性能优化之页面预加载方案 进阶篇 转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面 预加载方案 ...
- 微信小程序性能优化之一
微信小程序性能优化之一 原文:微信小程序性能优化之一 性能优化 界面和业务逻辑之间事件交互 小程序调用native Native回调小程序 图片源文件优化 渲染优化 ----------------- ...
- 微信小程序表单提交php存储,微信小程序实现form表单本地储存数据
本文实例为大家分享了微信小程序实现form表单本地储存数据的具体代码,供大家参考,具体内容如下 效果图: 主要利用小程序的getStorage来实现异步本地储存. 小程序目录结构如下: 新建项目前,为 ...
- 小程序性能优化之页面预加载方案——让你的小程序运行如飞 集成篇
小程序性能优化之页面预加载方案 集成篇 转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言 之前看到一篇文 ...
- 微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
- 同程艺龙小程序性能监控系统的探索与实践
导语 |近日,云+社区开发者大会(苏州站)圆满落幕.本次开发者邀请了腾讯内部及业内行业大咖就物联网.小程序.微服务等当前互联网领域的热点技术的落地实践问题进行了深度探讨.本文是同程艺龙资深架构师牛提罚 ...
- 微信小程序开发之文件上传下载应用场景(附Demo源码)
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
最新文章
- [Matlab] 获取给定两点间直线上点集的方法
- 【ESP8266】ESP8266_NONOS_SDK开发包生成的镜像文件构建步骤分析
- 三杯茶(一本令全世界为之动容的书)(Three cups of tea)
- Java英雄:丹·艾伦
- Asp.net web Api源码分析-HttpParameterBinding
- C 怎么读取Cpp文件_python之调用C加速计算(一)
- opencv 计数后不动了 训练模型时_用OpenCV,深度学习和Python进行年龄识别
- 【TW短评测】6999元Find X2 Pro一周体验:这块120Hz屏我能玩一年
- 常用SQL语句---备忘
- AMQP Connection 127.0.0.1:5672] ERROR [o.s.a.rabbit.connection.CachingConnectionFactory] CachingConn
- 简用计算机,你真的会使用“计算器”吗?
- 图像通道变换python-opencv
- C# 自定义网格 dataGridView 三角箭头移动 获取当前行列序号 滚动条显示改变 滚动条定位索引
- Gocloud高恪固件CVE-2020-8949漏洞利用打开SSH(poc支持5.2最新版测试通过)
- 快速开发:普元EOS平台简介
- WIFI系列协议--802.11--系列协议说明
- 网易的java微专业_网易微专业Java开发工程师(Web方向)
- Android MVP开发框架
- 运算放大器自激振荡仿真
- C++ 实现斗地主玩法
热门文章
- r7 5800x配什么主板和显卡
- Elasticsearch 实现类似SQL语句中like %关键字% 的单纯模糊查询(不进行分词)
- ResNet残差网络——Deep Residual Learning for image recongnition
- Spark GraphX 图算法的理解
- 谷歌浏览器如何收藏网站 谷歌浏览器收藏网站的方法步骤
- ‘parent.relativePath‘ points at com.xxx instead of org.springframework.boot:spring-boot-starter的快速解决
- java8 foreach 抛异常_Java Stream中的异常处理
- Conflux的自我进化:从DAG到树图| 对话伍鸣
- 【igraph实例】Commmunity 识别
- python没学历可以学习么_python没有学历好就业吗_学历低可以学习python吗