indexDB 大图缓存

配景

最近在项目中遇到了一个问题：由于大屏配景图加载速度过慢，导致页面黑屏时间过长，影响了用户的体验。从下图可以看出加载耗时快要一分钟

IndexDB

重要的想法就是使用indexDB去做缓存，优化加载速度；在这之前，我们先简朴了解下indexDB。
IndexDB（Indexed Database）是欣赏器提供的一种用于客户端存储和检索大量结构化数据的API。它是一个基于键值对存储的 NoSQL 数据库，允许网页应用在欣赏器中存储大量数据，并支持高效地查询和检索数据，而无需网络连接。基础知识可以查看阮一峰的这篇教程 欣赏器数据库 IndexedDB 入门教程
实现代码

1. 创建 IndexedDB 数据库

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

1. // 打开或创建 IndexedDB 数据库
2. const dbPromise = indexedDB.open('imageCacheDB', 1);
4. // 定义对象存储空间
5. dbPromise.onupgradeneeded = (event) => {
6.   const db = event.target.result;
7.   if (!db.objectStoreNames.contains('images')) {
8.     db.createObjectStore('images',  { keyPath: 'id' });
9.   }
10. };

复制代码

2.缓存图片到 IndexedDB

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

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

复制代码

存入成功后可以在开发者工具中查看

3. 从 IndexedDB 中获取图片

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

1. // 从 IndexedDB 获取图片
2. function getImageFromCache(id, callback) {
3.   const dbPromise = indexedDB.open('imageCacheDB');
4.   dbPromise.onsuccess = (event) => {
5.     const db = event.target.result;
6.     const tx = db.transaction('images', 'readonly');
7.     const store = tx.objectStore('images');
8.     const request = store.get(id);
10.     request.onsuccess = (event) => {
11.       const blob = event.target.result;
12.       if (blob) {
13.         const imageUrl = URL.createObjectURL(blob);
14.         callback(imageUrl); // 将 Blob 对象转换为 URL，并返回给回调函数
15.       } else {
16.         callback(null); // 没有找到对应的图片缓存，可调用缓存方法处理
17.       }
18.     };
19.   };
20. }

复制代码

缓存后再次加载速度得到了很大提升

总结

通过使用 IndexedDB 进行图片缓存，可以显着提升大屏配景图加载速度，改善用户体验，减少页面黑屏时间。IndexedDB 是欣赏器提供的客户端数据库 API，可以在欣赏器中存储大量结构化数据，并支持高效的数据检索和查询，特别得当用于缓存大量图片或其他数据。实现图片缓存的步调包括创建 IndexedDB 数据库、将图片转换为 Blob 对象并存储到数据库中，以及从数据库中获取并展示图片。这种缓存机制可以在用户初次访问时将图片存储在本地，再次访问时直接从本地获取，制止了每次加载都须要从服务器获取图片的耗时操纵。
使用 IndexedDB 进行图片缓存的优势在于：

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。