前端图片缓存优化：基于内存的高效图片缓存方案

1class ImageCache {
2  constructor() {
3    // 使用Map存储图片缓存，key为图片链接，value为base64数据
4    this.cache = new Map();
5    // 设置缓存过期时间（1小时）
6    this.expireTime = 60 * 60 * 1000;
7  }
8  
9  // 获取缓存的图片
10  async get(url) {
11    const cacheKey = this._getCacheKey(url);
12    const cached = this.cache.get(cacheKey);
13
14    if (cached) {
15      const { data, timestamp } = cached;
16      // 检查是否过期
17      if (Date.now() - timestamp < this.expireTime) {
18        return data;
19      }
20      // 过期则删除缓存
21      this.cache.delete(cacheKey);
22    }
23
24    return null;
25  }
26  
27  // 设置图片缓存
28  set(url, data) {
29    const cacheKey = this._getCacheKey(url);
30    this.cache.set(cacheKey, {
31      data,
32      timestamp: Date.now()
33    });
34  }
35  
36  // 从OBS加载图片并缓存
37  async loadAndCache(vm, url) {
38    // 实现逻辑...
39  }
40  
41  // 清理过期缓存
42  clearExpired() {
43    // 实现逻辑...
44  }
45}

1{
2  data: "base64编码的图片数据",
3  timestamp: 1628156789123 // 缓存创建时间戳
4}

1async get(url) {
2  const cacheKey = this._getCacheKey(url);
3  const cached = this.cache.get(cacheKey);
4
5  if (cached) {
6    const { data, timestamp } = cached;
7    // 检查是否过期
8    if (Date.now() - timestamp < this.expireTime) {
9      return data;
10    }
11    // 过期则删除缓存
12    this.cache.delete(cacheKey);
13  }
14
15  return null;
16}

1async loadAndCache(vm, url) {
2  try {
3    // 先检查缓存
4    const cached = await this.get(url);
5    if (cached) {
6      return cached;
7    }
8
9    // 获取OBS链接
10    const obsUrl = await getObsFileUrl(vm, url, 1);
11    if (!obsUrl) return;
12
13    // 加载图片
14    const response = await fetch(obsUrl);
15    const blob = await response.blob();
16
17    // 转换为base64
18    return new Promise((resolve, reject) => {
19      const reader = new FileReader();
20      reader.onloadend = () => {
21        const base64data = reader.result;
22        // 存入缓存
23        this.set(url, base64data);
24        resolve(base64data);
25      };
26      reader.onerror = reject;
27      reader.readAsDataURL(blob);
28    });
29  } catch (error) {
30    console.error('加载图片失败:', error);
31    return null;
32  }
33}

1clearExpired() {
2  const now = Date.now();
3  for (const [key, value] of this.cache.entries()) {
4    if (now - value.timestamp >= this.expireTime) {
5      this.cache.delete(key);
6    }
7  }
8}

1import { imageCache } from '@/utils/imageCache';
2
3export default {
4  methods: {
5    async loadImage(imageUrl) {
6      // 尝试从缓存加载
7      const cachedImage = await imageCache.get(imageUrl);
8      
9      if (cachedImage) {
10        // 使用缓存的图片
11        this.imageSource = cachedImage;
12      } else {
13        // 加载并缓存
14        const image = await imageCache.loadAndCache(this, imageUrl);
15        if (image) {
16          this.imageSource = image;
17        }
18      }
19    }
20  }
21}

1<template>
2  <div>
3    <img v-if="imageSource" :src="imageSource" alt="Cached Image" />
4    <div v-else class="loading">加载中...</div>
5  </div>
6</template>
7
8<script>
9  import { imageCache } from '@/utils/imageCache';
10
11  export default {
12    data() {
13      return {
14        imageSource: null
15      };
16    },
17
18    async mounted() {
19      // 直接使用loadAndCache方法，它会自动检查缓存
20      this.imageSource = await imageCache.loadAndCache(
21        this,
22        'path/to/image.jpg'
23      );
24    },
25
26    beforeDestroy() {
27      // 可以在适当的时机清理过期缓存
28      imageCache.clearExpired();
29    }
30  };
31</script>

1_getCacheKey(url) {
2  return `img_${url}`;
3}