Asynchronous IndexedDB Batch Mutex Scheduling with Memory Cursors in High-Frequency WebApps

In fast-paced mobile web dashboards where real-time game logs, telemetry metrics, and user preference updates occur concurrently, opening separate read-write transactions on IndexedDB for every single event generates severe disk I/O bottlenecks. On budget mobile hardware, excessive database transactions saturate the browser's storage thread, delaying user interactions and leading to dropped animation frames.

To ensure efficient, thread-safe database writes without blocking the UI, combine an in-memory queue with an atomic transaction flush scheduler:

// storage/batchStorageManager.js
export class BatchedStorageScheduler {
  constructor(dbName = 'app_local_store', storeName = 'telemetry_records', flushIntervalMs = 500) {
    this.dbName = dbName;
    this.storeName = storeName;
    this.flushIntervalMs = flushIntervalMs;
    this.inMemoryQueue = [];
    this.isFlushing = false;
    this.dbPromise = this.initDatabase();

    // Start background flush cycle
    setInterval(() => this.flushQueue(), this.flushIntervalMs);
  }

  async initDatabase() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, 1);
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(this.storeName)) {
          db.createObjectStore(this.storeName, { keyPath: 'id' });
        }
      };
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  enqueue(record) {
    this.inMemoryQueue.push({
      ...record,
      queuedAt: performance.now()
    });
  }

  async flushQueue() {
    if (this.isFlushing || this.inMemoryQueue.length === 0) return;

    this.isFlushing = true;
    const batch = this.inMemoryQueue.splice(0, this.inMemoryQueue.length);

    try {
      const db = await this.dbPromise;
      const tx = db.transaction(this.storeName, 'readwrite');
      const store = tx.objectStore(this.storeName);

      // Execute entire batch inside a single atomic transaction
      for (const item of batch) {
        store.put(item);
      }

      await new Promise((resolve, reject) => {
        tx.oncomplete = () => resolve();
        tx.onerror = () => reject(tx.error);
        tx.onabort = () => reject(new Error('Transaction aborted'));
      });
    } catch (err) {
      console.warn('Batched IndexedDB write failed; restoring queue:', err);
      // Re-insert uncommitted batch to prevent data loss
      this.inMemoryQueue.unshift(...batch);
    } finally {
      this.isFlushing = false;
    }
  }
}

// Example usage: logging client interaction metrics without I/O contention
const telemetryWriter = new BatchedStorageScheduler();

export function recordClientTelemetry(actionType, details) {
  telemetryWriter.enqueue({
    id: crypto.randomUUID(),
    actionType,
    details,
    timestamp: Date.now()
  });
}

Key Engineering Advantages:

• Drastic Disk I/O Reduction: Consolidates dozens of discrete disk write operations into a single scheduled transaction, keeping mobile storage wear to a minimum.

• Non-Blocking UI Execution: Queue ingestion executes synchronously in memory in sub-millisecond time, preserving 60 FPS animation loops during rapid user actions.

For an operational reference of decoupled, low-footprint web viewports running in production, inspect this reference node.