小程序性能优化——文件的本地存储10M优化算法

小程序 同时被 2 个专栏收录
5 篇文章 0 订阅
1 篇文章 0 订阅

小程序文件的本地存储优化

优化原因!

众所周知,微信将小程序的本地文件存储空间限制为10M,导致我们在调用wx.saveFile()接口存储临时文件时,存着存着,就超过10M了。那该怎么办呢?

肯定是要写一套算法,避免超过10M啦!

算法来源 ~

之前博主在做Android的时候,了解过LruCache类。它是Android提供的一个缓存类,当缓存空间被占满时,会去移除最不经常访问的数据,从而保证新数据的正常插入。这就是小程序的文件存储算法的思想来源。

当然,LruCache中是使用LinkedHashMap来管理缓存数据的,这个LinkedHashMap可厉害了,它已经实现了按照访问顺序的存储,这就可以让我们在限定的空间满了的时候,方便的移除最不常访问的数据。这就是LruCache实现的思路。
在小程序里,我们的文件是存储在磁盘中的,可以调用wx.getSavedFileList()来获取所有文件在存储时保存的信息。微信官方指出,可以获取到三项内容。
这里写图片描述

这是我们仅能获取到的文件信息了,里面并没有访问时间的记录。所以针对这仅有的几条信息,我们不能将LruCache的思想硬搬过来,需要有所修改。

针对小程序的文件存储算法

要把大象装冰箱,总共分几步?!在写算法之前,我们先要根据现有资源,因地制宜的制定可行的方案。


  • 目前可获取到的资源:filePath,createTime,size
  • 要指定一个本地可存储的最大值MAX_SIZE。

那么,在存储一个临时文件时,我制定了下面的算法

移除最旧文件算法

这个算法在资源方面只会用到上面提到的filePath,createTime,size

我认为在用户保存文件时,如果空间已经满了,那么最旧的文件是或许是需要被移除的。所以可以依照createTime来移除最旧的文件。

算法核心思想就这么几点:

  1. 先获取要保存的临时文件的大小信息tempFileSize
  2. 然后移除本地文件,直到剩余空间大于tempFileSize
  3. 最后存入文件,返回本地文件路径。

以下是代码

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时,进行简单的加减就可以了。

  • 4
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值