IndexedDB 性能优化与 Dexie.js 最佳实践

概述IndexedDB 是浏览器内置的事务型键值数据库。本文从架构与代码实践角度给出可靠的性能优化路径，并展示使用 Dexie.js 的工程化方案。原生 IndexedDB 架构与事务function open(name, version = 1, upgrade) { return new Promise((resolve, reject) => { const req = indexedDB.open(name, version); req.onupgradeneeded = e => upgrade && upgrade(req.result, e.oldVersion, e.newVersion); req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function setup() { const db = await open('appdb', 1, db => { if (!db.objectStoreNames.contains('items')) { const store = db.createObjectStore('items', { keyPath: 'id' }); store.createIndex('byType', 'type'); store.createIndex('byUpdatedAt', 'updatedAt'); } }); db.close(); } async function bulkPutNative(records) { const db = await open('appdb'); const tx = db.transaction('items', 'readwrite'); const store = tx.objectStore('items'); for (const r of records) store.put(r); await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); tx.onabort = () => reject(tx.error); }); db.close(); } 优化要点：合理的主键与索引设计、合并批量写入、减少事务数量、数据结构稳定。使用 Dexie.js 的工程化方案import Dexie from 'dexie'; const db = new Dexie('appdb'); db.version(1).stores({ items: 'id, type, updatedAt' }); async function bulkPut(records) { await db.items.bulkPut(records); } async function queryByType(type) { return db.items.where('type').equals(type).toArray(); } 要点：使用 bulkPut 合并写入、索引命名与查询一致、将数据库访问封装为可替换的数据层。一致性与恢复将写入封装在事务内实现原子性。记录失败与重试策略，确保在页面刷新或网络波动时可恢复。配合 Service Worker 或后台任务进行队列化写入，避免主线程阻塞。