Inserting large quantities in IndexedDB's objectstore blocks UI

You're on the right track, but you're asking the browser to store 35,000 objects before it's had a chance to finish storing one. Here's code which asynchronously waits for one request to finish before starting the next (but using the same transaction):

    openRequest = window.indexedDB.open("MyDatabase", 1);    openRequest.onerror = function(event) {        console.error(event);    };    openRequest.onsuccess = function (event) {        var db = openRequest.result;        db.onerror = function(event) {            // Generic error handler for all errors targeted at this database's requests            console.error(event.target);            window.alert("Database error: " + event.target.wePutrrorMessage || event.target.error.name || event.target.error || event.target.errorCode);        };        var transaction = db.transaction('item', "readwrite");        var itemStore = transaction.objectStore("item");        putNext();        function putNext() {            if (i<items.length) {                itemStore.put(items[i]).onsuccess = putNext;                ++i;            } else {   // complete                console.log('populate complete');                callback();            }        }               };      

Wild guess from my side, but if WebSQL is available from what is known as a "background page", and assuming the bandwidth of messaging between the front- and backpage does not lock up the UI in the same way, maybe a background page with intra page message could be utilized?

I am splitting the array in chunks of 500 and using setTimeout instead of for loop. Now the UI responds little better than before