導(dǎo)語：上篇js優(yōu)化阿里云圖片加載中，總結(jié)了一種優(yōu)化的方法，但是每個實(shí)現(xiàn)圖片緩存的界面都需要注入相關(guān)代碼，因此考慮是不是有另外一種方式。

---

優(yōu)化后的方案：定義一個全局的緩存池來緩存真實(shí)路徑。

糾結(jié)的點(diǎn)：在什么地方來獲取和更新緩存，有兩個點(diǎn)：

????????1.封裝組件<Image/>，在賦值source時，判斷如果有緩存使用緩存，否則重新請求。
????????2.合并請求，將多張圖片判斷是否有緩存，同時存取緩存。

優(yōu)缺點(diǎn)分析：

• 第一種，優(yōu)點(diǎn)：使用更簡單；缺點(diǎn)：每張圖都要請求服務(wù)器，每張都要處理。
• 第二種，優(yōu)點(diǎn)：減少服務(wù)器請求，可以批量處理圖片；缺點(diǎn)：處理邏輯要賦值前處理。

我采用了第二種方法，具體思路：

定義一個全局的緩存池。

在賦值給image之前引用獲取真實(shí)路徑的邏輯。

實(shí)現(xiàn)全局緩存池的工具類

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) {// 此處加入從服務(wù)器獲取網(wǎng)絡(luò)請求的邏輯// result是獲取的結(jié)果let reSetResult = result.response ? result.response : result;setCache(arr, reSetResult.result);return reSetResult.result;} else {return cache;}};/*** 設(shè)置緩存中的值* @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);}}};/*** 驗(yàn)證緩存是否有效* @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>賦值前調(diào)用

showPictures = (paths, cacheRealPaths) => {this.newPaths = paths;if (paths && paths.length > 0) {// 獲取真實(shí)路徑getRealPath(paths).then(result => {// 判斷拿去獲取的paths是最新的paths，是其他界面的緩存pathsif (this.newPaths === paths && this.state) {this.setState({paths: result})}}); }else {if (this.state) {this.setState({paths: []})}}};

總結(jié)

以上是生活随笔為你收集整理的js优化阿里云图片加载（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。