欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js优化阿里云图片加载(二)

程序员文章站 2022-04-13 14:09:26
...

导语:上篇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: []
                })
            }
        }
    };
相关标签: 图片