js优化阿里云图片加载(二)
程序员文章站
2022-04-13 14:09:26
...
导语:上篇js优化阿里云图片加载中,总结了一种优化的方法,但是每个实现图片缓存的界面都需要注入相关代码,因此考虑是不是有另外一种方式。
优化后的方案:定义一个全局的缓存池来缓存真实路径。
纠结的点:在什么地方来获取和更新缓存,有两个点:
1.封装组件<Image/>,在赋值source时,判断如果有缓存使用缓存,否则重新请求。
2.合并请求,将多张图片判断是否有缓存,同时存取缓存。
优缺点分析:
- 第一种,优点:使用更简单;缺点:每张图都要请求服务器,每张都要处理。
- 第二种,优点:减少服务器请求,可以批量处理图片;缺点:处理逻辑要赋值前处理。
我采用了第二种方法,具体思路:
- 定义一个全局的缓存池。
- 在赋值给image之前引用获取真实路径的逻辑。
实现全局缓存池的工具类
let imageCacheMap = new Map(); // 用一个map来做缓存池
/**
* 获取缓存中的值
* @param arr
* @returns {*}
*/
let getCache = (arr) => {
if (arr) {
let newArr = [];
for (let i = 0; i < arr.length; i++) {
newArr[i] = imageCacheMap.get(arr[i]);
if (!newArr[i]) {
return null;
}
}
if (!isValid(newArr)) {
return null;
}
return newArr;
} else {
return null;
}
};
/**
*
* @param arr
* @returns {Promise<*>}
*/
let getRealPath = async (arr) => {
let cache = getCache(arr);
if (cache === null) {
// 此处加入从服务器获取网络请求的逻辑
// result是获取的结果
let reSetResult = result.response ? result.response : result;
setCache(arr, reSetResult.result);
return reSetResult.result;
} else {
return cache;
}
};
/**
* 设置缓存中的值
* @param arr
* @param reSetResult
* @returns {*}
*/
let setCache = (arr, reSetResult) => {
if (imageCacheMap.size > 1000) {
imageCacheMap = new Map(Array.from(imageCacheMap).slice(imageCacheMap.size-500,imageCacheMap.size))
}
let length = arr.length;
if (reSetResult) {
for (let i = 0; i < length; i++) {
imageCacheMap.set(arr[i], reSetResult[i]);
}
} else {
for (let i = 0; i < length; i++) {
imageCacheMap.set(arr[i], undefined);
}
}
};
/**
* 验证缓存是否有效
* @param cacheRealPaths
* @returns {boolean}
*/
let isValid = (cacheRealPaths) => {
if (cacheRealPaths && cacheRealPaths.length > 0) {
let start = cacheRealPaths[0].indexOf('=') + 1;
let end = cacheRealPaths[0].indexOf('&');
let validTime = parseInt(cacheRealPaths[0].substring(start, end));
let curTime = (new Date().getTime()) / 1000;
if (validTime > curTime) {
return true;
}
}
return false;
};
module.exports = {getCache, getRealPath, setCache, isValid};
在给<Image>赋值前调用
showPictures = (paths, cacheRealPaths) => {
this.newPaths = paths;
if (paths && paths.length > 0) {
// 获取真实路径
getRealPath(paths).then(result => {
// 判断拿去获取的paths是最新的paths,是其他界面的缓存paths
if (this.newPaths === paths && this.state) {
this.setState({
paths: result
})
}
});
}
else {
if (this.state) {
this.setState({
paths: []
})
}
}
};