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>

<!-- 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);

//
// 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();
    log(``);
    log(`put() (with transaction)`);
    log(`=========`);
    log(`Let's put() 10,000 documents in a single transaction! ...`);
    let time = performance.now();
    await db.transaction('rw', db.raindrops, async () => {
      for (const drop of drops) {
        await db.raindrops.put(drop);
      }
    });
    log(`put() operations done. Took ${Math.round(performance.now() - time)} milliseconds.`);

    log(``);
    log(`put() (without transaction)`);
    log(`=========`);
    await db.raindrops.clear();
    log(`Let's put() 10,000 documents without using a transaction! ...`);
    time = performance.now();
    for (const drop of drops) {
      await db.raindrops.put(drop);
    }
    log(`put() operations done. Took ${Math.round(performance.now() - time)} milliseconds.`);

    log(``);
    log(`bulkPut()`);
    log(`=========`);
    await db.raindrops.clear();
    log(`Let's put 10,000 documents in a single bulkPut()! ...`);
    time = performance.now();
    await db.raindrops.bulkPut(drops);
    log(`bulkPut() operation done. Took ${Math.round(performance.now() - time)} milliseconds.`);
    log(``);
    
    log(``);
    log(`add() (with transaction)`);
    log(`=========`);
    await db.raindrops.clear();
    log(`Let's add() 10,000 documents in a single transaction! ...`);
    await db.transaction('rw', db.raindrops, async () => {
      for (const drop of drops) {
        await db.raindrops.add(drop);
      }
    });
   ...