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 或后台任务进行队列化写入，避免主线程阻塞。