js优化阿里云图片加载（二）

导语：上篇js优化阿里云图片加载中，总结了一种优化的方法，但是每个实现图片缓存的界面都需要注入相关代码，因此考虑是不是有另外一种方式。

---

优化后的方案：定义一个全局的缓存池来缓存真实路径。

纠结的点：在什么地方来获取和更新缓存，有两个点：

        1.封装组件<Image/>，在赋值source时，判断如果有缓存使用缓存，否则重新请求。
        2.合并请求，将多张图片判断是否有缓存，同时存取缓存。

优缺点分析：

• 第一种，优点：使用更简单；缺点：每张图都要请求服务器，每张都要处理。
• 第二种，优点：减少服务器请求，可以批量处理图片；缺点：处理逻辑要赋值前处理。

我采用了第二种方法，具体思路：

1. 定义一个全局的缓存池。
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: []
                })
            }
        }
    };