javascript - w3schools - Insertar grandes cantidades en la IU de bloques de objetos de IndexedDB

pwa indexeddb

Question

Quiero guardar algunos ~ 35000 objetos en el almacén de objetos de mi IndexedDB. Estoy usando el código de abajo para insertar.

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

El código anterior funciona bien, pero hacer un bucle e insertar más de ~ 35000 objetos hace que la IU no responda durante unos 200 segundos. Pensé que tal vez pueda usar WebWorkers, pero IndexedDB no está disponible dentro de WebWorkers. Traté de encontrar una manera de insertar masivamente, no pude encontrar una. ¿Alguna idea de cómo insertar grandes cantidades de objetos sin bloquear la interfaz de usuario?

Answer 1

Está en el camino correcto, pero le está pidiendo al navegador que almacene 35,000 objetos antes de que tenga la oportunidad de terminar de almacenar uno. Aquí hay un código que espera de forma asíncrona a que finalice una solicitud antes de comenzar la siguiente (pero usando la misma transacción):

    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

Estás haciendo todo lo que tienes que hacer usando devoluciones de llamada.

La API de Webworker aún no se ha implementado en ningún navegador principal. Curiosamente, se espera que sea síncrono. La API normal es asíncrona por la razón exacta que describe: no se supone que bloquee el subproceso de la interfaz de usuario.

El uso de devoluciones de llamada es la forma de evitar los bloqueos, pero en los 35k objetos se ve claramente que este paradigma se rompe. Desafortunadamente, el rendimiento del BID aún no está a la par con WebSQL de los puntos de referencia que he visto.

Con el LevelDB de Chrome ha habido algunos backends experimentales nuevos (FF es SQLite) pero creo que su experiencia demuestra que hay margen de mejora.

Answer 3

Estoy dividiendo la matriz en trozos de 500 y usando setInterval lugar de for loop. Ahora la UI responde poco mejor que antes

Answer 4

Por mi parte, supongo, pero si WebSQL está disponible desde lo que se conoce como una "página de fondo", y suponiendo que el ancho de banda de los mensajes entre la parte delantera y la página de atrás no bloquee la interfaz de usuario de la misma manera, tal vez una página de fondo ¿Se podría utilizar el mensaje intra página?