1. IndexedDB并发问题全景解析在PWA应用开发中IndexedDB作为浏览器端核心存储方案其并发处理能力直接决定了应用的用户体验上限。我曾在多个千万级DAU的PWA项目中亲历过因并发控制不当导致的诡异数据丢失和性能雪崩。不同于服务端数据库成熟的锁机制IndexedDB的并发模型有其独特的运行机理事务自动提交机制当某个事务的所有请求都已完成且没有新请求时浏览器会自动提交该事务。这意味着开发者无法像MySQL那样显式控制事务边界版本变更阻塞当数据库版本升级时会阻塞所有其他连接直到升级完成读写隔离缺陷同一对象存储空间ObjectStore的读写操作可能产生不可预期的覆盖// 典型的问题场景示例 const tx1 db.transaction(users, readwrite); const tx2 db.transaction(users, readwrite); tx1.objectStore(users).put({id: 1, name: Alice}); tx2.objectStore(users).put({id: 1, name: Bob}); // 最终结果不可预测2. 数据冲突的六种解决方案对比2.1 乐观并发控制实践在电商购物车场景中我们采用版本戳version stamp策略解决并发修改冲突async function updateCart(itemId, modifier) { const tx db.transaction([cart], readwrite); const store tx.objectStore(cart); const request store.get(itemId); request.onsuccess () { const data request.result; const currentVersion data._version; // 检查版本是否变化 if (currentVersion ! data._version) { throw new Error(数据已被其他会话修改); } // 应用修改并更新版本 modifier(data); data._version Date.now(); store.put(data); }; }关键提示版本戳应该使用单调递增的时间戳或计数器避免简单的布尔标志2.2 事务调度策略优化通过事务优先级队列实现读写分离class TransactionScheduler { constructor() { this.writeQueue []; this.readQueue []; this.isProcessing false; } addRead(tx) { this.readQueue.push(tx); this.process(); } addWrite(tx) { this.writeQueue.push(tx); this.process(); } process() { if (this.isProcessing) return; // 优先处理写队列 if (this.writeQueue.length) { this.executeTransaction(this.writeQueue.shift()); } else if (this.readQueue.length) { // 批量处理读请求 const batch this.readQueue.splice(0, 5); this.executeBatch(batch); } } }3. 性能瓶颈突破实战3.1 批量操作性能对比在用户行为分析场景中我们测试了不同批量操作策略的耗时单位ms操作方式100条1000条10000条单条循环3202800超时批量事务453804200Web Worker并行382903100// 最佳实践分块批量处理 async function bulkInsert(storeName, items, chunkSize 500) { for (let i 0; i items.length; i chunkSize) { const chunk items.slice(i, i chunkSize); await new Promise((resolve) { const tx db.transaction(storeName, readwrite); const store tx.objectStore(storeName); chunk.forEach(item store.put(item)); tx.oncomplete resolve; tx.onerror (e) { console.error(批量插入失败, e); resolve(); }; }); } }3.2 索引设计黄金法则在社交应用的好友关系存储中我们总结出三条索引设计原则复合索引优先对[userId, friendId]建立复合索引比单独索引查询快3-7倍避免过度索引每个新增索引会增加约15%的写入开销包含式索引对高频查询的字段使用IDBKeyRange.only()// 创建优化后的索引 db.createObjectStore(relationships, { keyPath: [userId, friendId] }).createIndex(by_user_status, [userId, status], { unique: false, multiEntry: false });4. 高级并发模式解析4.1 多Tab协同方案通过BroadcastChannel实现跨Tab状态同步const channel new BroadcastChannel(indexeddb_sync); // 监听其他Tab的写操作 channel.addEventListener(message, (event) { if (event.data.type DB_UPDATE) { // 刷新本地缓存 refreshCache(event.data.store); } }); // 发送更新通知 function notifyUpdate(storeName) { channel.postMessage({ type: DB_UPDATE, store: storeName, timestamp: Date.now() }); }4.2 死锁检测算法实现简单的等待图检测class DeadlockDetector { constructor() { this.waitForGraph new Map(); // txId, [blockedTxIds] this.timer setInterval(() this.checkDeadlock(), 5000); } addDependency(waiter, blocker) { if (!this.waitForGraph.has(waiter)) { this.waitForGraph.set(waiter, new Set()); } this.waitForGraph.get(waiter).add(blocker); } checkDeadlock() { const visited new Set(); for (const [txId] of this.waitForGraph) { if (this.hasCycle(txId, visited)) { console.warn(检测到死锁事务${txId}将被终止); this.abortTransaction(txId); } } } }5. 实战中的血泪教训版本升级陷阱在用户未关闭旧版本页面时进行DB升级会导致VersionError。解决方案function openDatabase() { const request indexedDB.open(db, latestVersion); request.onblocked () { // 通知用户关闭其他Tab showReloadNotification(); }; request.onupgradeneeded (e) { // 迁移数据 }; }Cursor内存泄漏未关闭的Cursor会导致内存持续增长。必须始终执行const request store.openCursor(); request.onsuccess (e) { const cursor e.target.result; if (cursor) { // 处理数据 cursor.continue(); } else { // 显式释放资源 request.transaction.commit(); } };Blob存储性能超过50MB的Blob建议改用Cache API存储IndexedDB的Blob读写存在明显卡顿在大型文档协作编辑器的实现中我们最终采用的混合策略是乐观锁控制内容版本 操作转换(OT)算法处理并发修改 Web Worker离线队列。这套方案经受了200并发编辑的压力测试平均冲突率从最初的17%降至0.3%以下