"IndexedDB 性能优化与事务管理实践"

IndexedDB 性能优化与事务管理实践概述IndexedDB 是浏览器内置的键值对数据库，支持事务、索引、游标与大量数据存储，适合离线缓存、队列与元数据管理。数据模型与升级import { openDB, IDBPDatabase } from 'idb' type DBSchema = { files: { key: string; value: { size: number; updated: number; tags?: string[] } } chunks: { key: string; value: ArrayBuffer } } const db: IDBPDatabase<DBSchema> = await openDB<DBSchema>('app-db', 2, { upgrade(db, oldVersion) { if (oldVersion < 1) { const files = db.createObjectStore('files') files.createIndex('updated_idx', 'updated') } if (oldVersion < 2) { db.createObjectStore('chunks') } }, }) 事务与批量写入// 批量写入建议使用单个 readwrite 事务，减少开销 const tx = db.transaction(['files', 'chunks'], 'readwrite') await Promise.all([ tx.objectStore('files').put({ size: 200_000_000, updated: Date.now() }, 'video.mp4'), ...chunks.map((buf, i) => tx.objectStore('chunks').put(buf, `video.mp4:${i}`)), ]) await tx.done // idb 库：等待事务完成 索引与查询// 按更新时间倒序读取最新 N 条 const idx = db.transaction('files').store.index('updated_idx') let cursor = await idx.openCursor(undefined, 'prev') const result: Array<{ key: string; value: any }> = [] while (cursor && result.length < 50) { result.push({ key: cursor.primaryKey as string, value: cursor.value }) cursor = await cursor.continue() } 游标与分页// 游标分页：从指定 key 开始向后读取 const startKey = 'video.mp4' let cur = await db.transaction('chunks').store.openCursor(IDBKeyRange.lowerBound(startKey)) const page: string[] = [] while (cur && page.length < 100) { page.push(cur.key as string) cur = await cur.continue() } 并发与一致性事务隔离：同一数据库的并发 `readwrite` 事务会串行化执行；避免长事务阻塞 UI。写入策略：优先批量写入、分块存储，避免单记录超大 Blob；结合 OPFS 进行大文件数据面存储。版本升级：升级函数中幂等设计；避免删除重要数据结构。技术参数与验证事务模式：`readonly`/`readwrite`；`versionchange` 仅在升级期间使用。索引：支持多字段索引与唯一约束；`openCursor` 支持方向与范围查询。容量：按站点配额与磁盘空间限制；大数据建议分块与流式处理。兼容：所有现代浏览器支持；Safari 在部分版本有实现差异，建议通过特性检测。验证环境：Chrome 121、Edge、Safari（版本覆盖）；事务语义、索引查询与游标遍历经自动化用例验证。注意事项错误与重试：捕获 `AbortError`/`QuotaExceededError`，指数退避重试；必要时进行数据压缩或清理。主线程性能：避免在 UI 线程进行大规模序列化；结合 Web Worker 处理。数据迁移：升级时保留旧结构数据；提供回退与导出机制。参考资料MDN: IndexedDB APIW3C: IndexedDB 标准idb 库（Jake Archibald）---发布信息发布日期: 2025-11-18最后更新: 2025-11-18作者: 前端技术团队状态: 已发布技术验证: 已验证阅读时间: 20分钟版权: CC BY-SA 4.0