当前位置:   article > 正文

indexDB 大图缓存

indexDB 大图缓存

背景

最近在项目中遇到了一个问题:由于大屏背景图加载速度过慢,导致页面黑屏时间过长,影响了用户的体验。从下图可以看出加载耗时将近一分钟
在这里插入图片描述

IndexDB

主要的想法就是利用indexDB去做缓存,优化加载速度;在这之前,我们先简单了解下indexDB。

IndexDB(Indexed Database)是浏览器提供的一种用于客户端存储和检索大量结构化数据的API。它是一个基于键值对存储的 NoSQL 数据库,允许网页应用在浏览器中存储大量数据,并支持高效地查询和检索数据,而无需网络连接。基础知识可以查看阮一峰的这篇教程 浏览器数据库 IndexedDB 入门教程

实现代码

1. 创建 IndexedDB 数据库

首先,需要在应用中创建一个 IndexedDB 数据库,并设置一个对象存储空间用于存储图片数据。

// 打开或创建 IndexedDB 数据库
const dbPromise = indexedDB.open('imageCacheDB', 1);

// 定义对象存储空间
dbPromise.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('images')) {
    db.createObjectStore('images',  { keyPath: 'id' });
  }
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
2.缓存图片到 IndexedDB

当需要缓存图片时,将图片文件转换为 Blob 对象,并将 Blob 对象存储到 IndexedDB 中。

const storeImageData = (id, url) => {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const dbPromise = indexedDB.open('imageCacheDB');
      dbPromise.onsuccess = (event) => {
        const db = event.target.result;
        const tx = db.transaction('images', 'readwrite');
        const store = tx.objectStore('images');
        store.put({ id, imageData: blob }); // 将 Blob 对象存储到 IndexedDB
      };
    })
    .catch(error => {
      console.error('Failed to cache image:', error);
    });
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

存入成功后可以在开发者工具中查看
在这里插入图片描述

3. 从 IndexedDB 中获取图片

当需要加载图片时,先检查 IndexedDB 中是否存在缓存,如果存在则从 IndexedDB 中获取 Blob 对象,然后将 Blob 对象转换为可用的 URL。

// 从 IndexedDB 获取图片
function getImageFromCache(id, callback) {
  const dbPromise = indexedDB.open('imageCacheDB');
  dbPromise.onsuccess = (event) => {
    const db = event.target.result;
    const tx = db.transaction('images', 'readonly');
    const store = tx.objectStore('images');
    const request = store.get(id);

    request.onsuccess = (event) => {
      const blob = event.target.result;
      if (blob) {
        const imageUrl = URL.createObjectURL(blob);
        callback(imageUrl); // 将 Blob 对象转换为 URL,并返回给回调函数
      } else {
        callback(null); // 没有找到对应的图片缓存,可调用缓存方法处理
      }
    };
  };
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

缓存后再次加载速度得到了很大提升
在这里插入图片描述

总结

通过利用 IndexedDB 进行图片缓存,可以显著提升大屏背景图加载速度,改善用户体验,减少页面黑屏时间。IndexedDB 是浏览器提供的客户端数据库 API,可以在浏览器中存储大量结构化数据,并支持高效的数据检索和查询,特别适合用于缓存大量图片或其他数据。实现图片缓存的步骤包括创建 IndexedDB 数据库、将图片转换为 Blob 对象并存储到数据库中,以及从数据库中获取并展示图片。这种缓存机制可以在用户首次访问时将图片存储在本地,再次访问时直接从本地获取,避免了每次加载都需要从服务器获取图片的耗时操作。

使用 IndexedDB 进行图片缓存的优势在于:

  1. 减少了对服务器的请求,节省了网络资源。
  2. 提升了页面加载速度和响应速度,改善了用户体验。
  3. 可以在离线状态下仍然展示已缓存的图片,增强了应用的稳定性和可靠性。

但需要注意的是,IndexedDB 作为客户端数据库,操作是异步的,需要合理处理异步操作,确保数据的正确存储和获取。另外,对于图片缓存,需要考虑缓存策略,如何管理缓存数据的大小和过期时间,以及在更新内容时如何更新缓存等问题。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/494423
推荐阅读
相关标签
  

闽ICP备14008679号