Dexie.js performance

Dexie.js performance

by Brian Birtles

HTML

<!-- Include dexie.js -->
<script src="https://unpkg.com/dexie@^2.0.0-beta/dist/dexie.js"></script>
<script src="https://unpkg.com/[email protected]/build/iife/index-min.js"></script>

<!-- Some HTML for the log window -->
<a href="http://dexie.org/docs/API-Reference" target="_new">Dexie API Reference (new tab)</a>

<h3>Log</h3>
<textarea id="log"></textarea>
<p id="safari-version" style="display:none;">
  This browser denies indexedDB access from iframes.
  <a href="https://fiddle.jshell.net/dfahlander/xf2zrL4p/show" target="_top">Click here to open it directly without any iframe.</a>
</p>

<!-- Just a simple log function... --> 
<script>
  function log(txt) {document.getElementById('log').value+=txt+"\n";}
</script>

CSS

textarea#log
{
    width: 100%;
    height: 1000px;
}

JavaScript

//
// Define database
//
var db = new Dexie("raindrops");
db.version(1).stores({
	raindrops: 'id,position',
});
log ("Using Dexie v" + Dexie.semVer);

// IDB version
const idbPromise = idb.openDB('raindrops-idb', 1, {
  upgrade(db) {
  	console.log('Creating raindrops store');
    const store = db.createObjectStore('raindrops', { keyPath: 'id' });
    store.createIndex('position', 'position');
  },
});

//
// Prepare data
//
var drops = [];
for (var i=1;i<=10000;++i) {
  drops.push({
    id: i,
    position: Math.random(),
    someData: {
      someText: "some value",
      someNumber: Math.random()
    }
  });
}

//
// Test Performance
//
testPerformance().catch(err => log(err));

async function testPerformance() {
	try {
    //
    // Open Database
    //
  	await db.open();
    const idbDb = await idbPromise;
    
    log(``);
    log(`idb put() (with transaction)`);
    log(`=========`);
    log(`Let's put() 10,000 documents in a single transaction using idb! ...`);
    let time = performance.now();
    {
      const tx = idbDb.transaction('raindrops', 'readwrite');
      for (const drop of drops) {
        await tx.store.put(drop);
      }
      await tx.done;
    }
    log(`put() operations done. Took ${Math.round(performance.now() - time)} milliseconds.`);
    
    log(``);
    log(`idb put() (with transaction but no waiting)`);
    log(`=========`);
    log(`Let's put() 10,000 documents in a single transaction using idb and not waiting! ...`);
    await idbDb.clear('raindrops');
    time = performance.now();
    {
      const tx = idbDb.transaction('raindrops', 'readwrite');
      for (const drop of drops) {
        tx.store.put(drop);
      }
      await tx.done;
    }
    log(`put() operations done. Took ${Math.round(performance.now() - time)} milliseconds.`);
    
    log(``);
    log(`put() (with transaction)`);
    log(`=========`);
    log(`Let's put() 10,000 documents in a single transaction! ...`);
    time = performance.now();
    await...