CODEWITHSUNDEEP
indexeddb
User 780611
User 780611

Reputation: 175

inserting large amount of data making page idle

I am using indexed db on browser, and other database on server side. I am having huge data on server DB.

When I request data from server, Index db is getting lock while inserting whole data. Because of that my front end becomes idle and I am not able to perform any action.

What should I do?

Upvotes: 0

Views: 157

Answers (1)

Joshua Bell
Joshua Bell

Reputation: 8337

Yield control back to the browser during the transaction.

For example, if you have this:

var records = [ ... ]; // say there 100k records
for (var i = 0; i < records.length; ++i)
  store.put(records[i]);

... that will make 100k requests; even if the overhead to initiate each request is small (a few microseconds) it will add up to an unresponsive page.

The other extreme is to insert one record at a time, yielding control back to the browser after each request:

var i = 0;
function doNextRecord() {
  if (i < records.length) {
    store.put(records[i]).onsuccess = doNextRecord;
    ++i;
  }
}
doNextRecord();

That will keep the page responsive, but yielding to the event loop 100k times means the transaction will take a very long time.

Instead, consider using batches.

var i = 0, BATCH_SIZE = 1000;
function doNextBatch() {
  var request;
  for (var b = 0; i < records.length && b < BATCH_SIZE; ++i, ++b)
    request = store.put(records[i]);
  if (i < records.length)
    request.onsuccess = doNextBatch;
}
doNextBatch();

Even better, set yourself a frame limit (e.g. 4ms) and instead of a fixed size keep track of how much time you've spent, and yield then.

Upvotes: 1

Related Questions