indexeddb 是浏览器内置支持事务的 nosql 数据库,适合离线应用与大容量结构化数据存储;需通过分片写入、游标流式读取、合理建索引及直接存 blob 等方式优化性能。

IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库,适合存储结构化数据(如对象、数组、文件等),尤其适用于需要离线运行或缓存大量数据的 Web 应用。它不是“把大数据一股脑塞进去”,而是通过分片、流式写入、索引优化和事务控制来高效处理大体积数据(比如数万条记录、百 MB 级二进制 blob)。
分块写入 + 事务批量提交
直接一次性 put 几万条数据会阻塞主线程、触发内存溢出或被浏览器中断。正确做法是将数据切分成小批次(例如每 100–500 条一组),在单个事务中批量写入,并控制事务生命周期。
- 使用 IDBObjectStore.add() 或 put() 批量操作,避免逐条提交
- 每次事务只操作一个 objectStore,且尽量缩短事务持续时间(写完立刻 commit)
- 写入前检查 event.target.result 或监听 onsuccess/.onerror,失败时重试或跳过当前批次
- 示例:把 10 万条日志拆成 200 批,每批 500 条,用递归或 async/await 控制节奏
用游标(cursor)+ event stream 处理超大集合
当数据量极大(如千万级记录)且需遍历、筛选或导出时,不要一次性 load 全部到内存。用 IDBCursor 配合 openCursor() 和 continue() 流式读取,边读边处理。
- 游标默认按主键升序遍历;可用 index.openCursor() 按索引字段遍历
- 结合 cursor.advance(n) 跳过部分记录,实现分页加载
- 对每个 cursor.value 做轻量计算(如统计、过滤),避免构造新数组累积内存
- 注意:游标在事务提交后自动失效,需在事务活跃期内完成所有操作
合理设计 schema 和索引提升查询效率
IndexedDB 查询性能极度依赖索引。没有索引的查询等于全表扫描,大数据下会严重卡顿。
- 建库时在 onupgradeneeded 中为常用查询字段(如 timestamp、category、status)调用 createIndex()
- 复合索引按查询顺序声明字段,例如 store.createIndex('by_time_status', ['timestamp', 'status'])
- 避免在频繁更新的字段上建过多索引,写入性能会下降
- 主键(keyPath)尽量用业务唯一 ID,而非自增 number —— 后者在并发写入时易冲突
存储二进制大文件(Blob / ArrayBuffer)的技巧
图片、音频、PDF 等大文件不建议转 base64 存字符串,应直接存 Blob 或 ArrayBuffer,并配合 URL.createObjectURL() 渲染。
- 写入时:直接 put(blob, key),IndexedDB 原生支持 Blob 类型
- 读取时:用 get(key) 获取 Blob,再用 FileReader 或 URL.createObjectURL 显示
- 注意:Blob 对象在 IndexedDB 中会被序列化,但不会自动压缩;如需减小体积,前端可先用 compression API(如 CompressionStream)压缩再存
- 大文件建议单独建 objectStore(如 "files"),避免与结构化数据混存影响事务粒度
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











