Dexie.js performance

Dexie.js performance

by David Fahlander

HTML

<!-- Include dexie.js -->
<script src="https://unpkg.com/dexie"></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(`bulkPut()`);
    log(`=========`);
    log(`Let's put 10,000 documents into indexedDB! ...`);
    await new Promise(resolve => setTimeout(resolve, 1)); // Leave some breath to GC.
    let time = performance.now();
    await db.raindrops.bulkPut(drops);
    log(`Put operations done. Took ${Math.round(performance.now() - time)} milliseconds.`);
    log(``);
    log(`Query`);
    log(`=====`);
    log(`Now query all documents within a small range...`);
    time = performance.now();
    const fewDrops = await db.raindrops
    	.where('position')
      .between(0.5, 0.51)
      .toArray();
    log(`Took ${Math.round(performance.now() - time)} milliseconds to find ${fewDrops.length} matching documents`);
    log(`Now query all documents within a large range...`);
    time = performance.now();
    const manyDrops = await db.raindrops
    	.where('position')
      .between(0.3, 0.7)
      .toArray();
    log(`Took ${Math.round(performance.now() - time)} milliseconds to find ${manyDrops.length} matching documents`);
    log(``);
    log(`Deleting`);
    log(`========`);
    log(`Now deleting all documents...`);
    time = performance.now();
    await db.raindrops
    	.where('id').between(0,10000)
      .delete();
    log(`Delete operaton done. Took ${Math.round(performance.now() - time)} milliseconds.`);
    log(`All Done.`);
  } catch (err) {
  	switch (err && err.name) {
      case 'BulkError':
  			log ("Some documents did...