IndexedDB lento en Google Chrome

Hola tengo una web donde tiro una consulta en Symfony con 5000 registros, los recorro con un bucle y ahí creo un HTML para insertar un listado con productos en una parte de la página. No tarda nada; lo hace razonablemente rápido.

Ahora quiero hacer exactamente lo mismo con indexedDB con los datos locales en el Chrome y es increíblemente lento. Pude ver en Google que al cargar los datos directamente con el DOM siempre es lentísimo.

¿Cuál sería el modo correcto? Dejo el código abajo

Saludos

$("#readAll").click(function () {
    var elements = [];
 
    var transaction = db.transaction(['products'], 'readonly');
    var objectStore = transaction.objectStore('products');
 
    var myIndex = objectStore.index('wname');
    var getRequest = myIndex.get('COR');
    getRequest.onsuccess = function () {
        console.log(getRequest.result);
    }
 
    $("#resultado").html('');
    myIndex.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            elements.push(cursor.value);
            cursor.continue();
        } else {
            console.log('Entries all displayed.');
        }
    };
 
    transaction.oncomplete = function () {
 
        var outerHTML = '';
 
        for (var key in elements) {
            outerHTML += "<span data-product-id = '" + elements[key].id + "' class = 'product' onclick='crear(" + elements[key].id + ");' >";
            outerHTML += '<div class = "product-img">';
            outerHTML += '<img src = "/tpv/img/image.png">';
            outerHTML += '<span class = "price-tag">';
            outerHTML += elements[key].price;
            outerHTML += '</span>';
            outerHTML += '</div>';
            outerHTML += '<div class = "product-name">';
            outerHTML += elements[key].pname + ' ' + elements[key].cname + ' ' + elements[key].tname + ' ' + elements[key].description + ' [' + elements[key].quantity + ']';
            outerHTML += '</div>';
            outerHTML += '</span>';
        }
 
        elements = [];
        $("#resultado").html(outerHTML);
    };
});

Respuestas

#1

Lamentablemente IndexedDB no solo es más lento que LocalStorage y WebSQL (como se muestra en este artículo) sino que bloquea el DOM mientras hace sus operaciones, así que da la sensación de ser todavía más lento.

No veo nada raro en el código que muestras. ¿Has probado a usar el profiler de Google Chrome a ver si te da alguna pista sobre dónde está el problema del rendimiento?

@javiereguiluz

15 junio 2016, 16:18

#2

Estoy usando NW.js, no se ve nada raro solo se queda la pagina esperando y luego se ve cargar el HTML de golpe... por ser una aplicación off line digamos que no es viable que sea mas lento que la misma aplicación on line.

Mi idea era tener los datos de los productos en local e ir jugando con RabbitMQ mas Symfony y así mantener a los clientes y al servidor actualizados por si se corta internet o alguna caída del servidor...

Veo que en ese articulo recomiendan usar WebWorker ...

En fin sigo perdido tratando de hacer el punto de ventas Off line...

Saludos

@xub

15 junio 2016, 18:04