indexDB 大图缓存
配景最近在项目中遇到了一个问题：由于大屏配景图加载速度过慢，导致页面黑屏时间过长，影响了用户的体验。从下图可以看出加载耗时快要一分钟
https://i-blog.csdnimg.cn/blog_migrate/7c0f2266a405b0d65d5f62a239d1957f.png
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' });
}
};
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);
});
}
存入成功后可以在开发者工具中查看
https://i-blog.csdnimg.cn/blog_migrate/a7dbb0870f4a2f795c03078765f2b8c3.png
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); // 没有找到对应的图片缓存，可调用缓存方法处理
}
};
};
}
缓存后再次加载速度得到了很大提升
https://i-blog.csdnimg.cn/blog_migrate/6807ccb04251e29915549ca1a49fdeb2.png
总结
通过使用 IndexedDB 进行图片缓存，可以显着提升大屏配景图加载速度，改善用户体验，减少页面黑屏时间。IndexedDB 是欣赏器提供的客户端数据库 API，可以在欣赏器中存储大量结构化数据，并支持高效的数据检索和查询，特别得当用于缓存大量图片或其他数据。实现图片缓存的步调包括创建 IndexedDB 数据库、将图片转换为 Blob 对象并存储到数据库中，以及从数据库中获取并展示图片。这种缓存机制可以在用户初次访问时将图片存储在本地，再次访问时直接从本地获取，制止了每次加载都须要从服务器获取图片的耗时操纵。
使用 IndexedDB 进行图片缓存的优势在于：
[*]减少了对服务器的请求，节省了网络资源。
[*]提升了页面加载速度和相应速度，改善了用户体验。
[*]可以在离线状态下仍然展示已缓存的图片，增强了应用的稳定性和可靠性。
但须要注意的是，IndexedDB 作为客户端数据库，操纵是异步的，须要公道处理异步操纵，确保数据的正确存储和获取。另外，对于图片缓存，须要考虑缓存策略，如何管理缓存数据的巨细和逾期时间，以及在更新内容时如何更新缓存等问题。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]