Einfügen großer Mengen in die Objectstore-Blöcke von IndexedDB UI

Question

Ich möchte ungefähr 35000 Objekte im Objektspeicher meiner IndexedDB speichern. Ich verwende den folgenden Code zum Einfügen.

AddListings = function (x2j_list_new, callback) { 
    var transaction = db.transaction(["listings"], IDBTransaction.READ_WRITE); 
    var count = 0; 
    transaction.oncomplete = function (event) { 
     if (callback) { 
      console.log('x2jShowListing Added ' + count + '/' + x2j_list_new.length); 
       callback([count, x2j_list_new.length]); 
      } 
    }; 
    transaction.onerror = function (e) { 
     console.log("myError: ", e); 
     if (callback) { 
      callback(false); 
     } 
    }; 
    var store = transaction.objectStore("listings"); 

    $.each(x2j_list_new, function (index0, item0) { 
     var request = store.put(item0); 
     request.onsuccess = function (event) { 
      count++; 
      // event.target.result 
      }; 
     }); 
    });   
}; 

Der obige Code funktioniert gut, aber Looping und ~ 35000 Einfügen von Objekten über macht die Benutzeroberfläche nicht mehr reagiert für ~ 200 Sekunden. Ich dachte, ich könnte vielleicht WebWorker benutzen, aber IndexedDB ist in WebWorker nicht verfügbar. Ich habe versucht, einen Weg zu finden, Massen einzufügen, konnte keinen finden. Haben Sie Ideen, wie Sie große Mengen von Objekten einfügen können, ohne die Benutzeroberfläche zu blockieren?

Answer 1

Sie sind auf dem richtigen Weg, aber Sie bitten den Browser, 35.000 Objekte zu speichern, bevor es die Möglichkeit hatte, eine zu speichern. Hier ist Code, der asynchron wartet auf eine Anfrage vor dem Start des nächsten zu beenden (aber mit der gleichen Transaktion):

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(); 
      } 
     }   
    };  

Answer 2

Sie tun alles, was Sie richtig machen, indem Sie Rückrufe verwenden.

Die Webworker-API wurde noch nicht von einem größeren Browser implementiert. Interessanterweise wird erwartet, dass es synchron ist. Die reguläre API ist asynchron, genau aus dem Grund, den Sie beschreiben - sie soll den UI-Thread nicht blockieren.

Die Verwendung von Rückrufen ist der Weg, um Blockierungen zu vermeiden, aber bei 35.000 Objekten sieht man deutlich, dass dieses Paradigma zusammenbricht. Leider ist die IDB-Leistung von den Benchmarks, die ich gesehen habe, noch nicht mit WebSQL vergleichbar.

Mit Chrome's LevelDB gab es einige neue experimentelle Backends (FF ist SQLite), aber ich denke, Ihre Erfahrung zeigt, dass es noch Raum für Verbesserungen gibt.

Answer 3

Wilde Vermutung von meiner Seite, aber wenn WebSQL von so genannten "Hintergrundseite" verfügbar ist, und unter der Annahme, dass die Bandbreite der Nachrichtenübermittlung zwischen der Front- und Backpage die Benutzeroberfläche auf die gleiche Weise nicht blockiert, vielleicht könnte eine Hintergrundseite mit Intra-Page-Nachricht verwendet werden?

Answer 4

Ich spalte das Array in Stücke von 500 und mit setTimeout anstelle von For-Schleife. Jetzt reagiert die Benutzeroberfläche etwas besser als zuvor