Question

我在 IndexedDB 中存储了一些 jpeg 文件（正好 350 个，相同的文件大小。总计：336.14 MB）作为 Blob。完成交易大约需要 1 秒钟。然后我将所有数据从 IndexedDB 读取到一个数组，并再次读取到 IndexedDB。但这次大约需要 15 秒。我观察到这是一致的行为。这里有什么问题吗？我使用 performance.now() 来获取时差

文件：350，每个的大小：937 KB，浏览器：Chrome 和 Chromium Edge

    //Open
var dbOpen = indexedDB.open(INDEXED_DB_NAME, INDEXED_DB_VERSION);
dbOpen.onupgradeneeded = function (e) {
    console.log("onupgradeneeded");
    var store = e.currentTarget.result.createObjectStore(
        IMAGE_DATA_STORE, { autoIncrement: true });
};
dbOpen.onsuccess = function (e) {
    image_data_db = dbOpen.result;
    console.log("indexed DB opened");
};
//Initial Write
    var inputFiles = document.getElementById('inputFiles');
    
    for (var i = 0; i < inputFiles.files.length; i++) {
        let file = inputFiles.files[i];
        var b = new Blob([file], { type: file.type });
        fileblobs.push(b);
    }
    StoreIdb(fileblobs); // < First write
    
//StoreIdb()

    t0 = performace.now(); 
    var trx = image_data_db.transaction(IMAGE_DATA_STORE, 'readwrite');
    var imagestore = trx.objectStore(IMAGE_DATA_STORE);
    for (i = 0; i < fileblobs.length; i++) {
        request = imagestore.add(fileblobs[i]);
        request.onsuccess = function (e) {
            console.log('added');
        };
        request.onerror = function (e) {
            console.error("Request Error", this.error);
        };
    }
    trx.onabort = function (e) {
        console.error("Exception:", this.error, this.error.name);
    };
    trx.oncomplete = function (e) {
        console.log('completed');
        t1 = performance.now();
        timetaken = t1 - t0; 
    }
        
//Read
    var objectStore = image_data_db.transaction(IMAGE_DATA_STORE).objectStore(IMAGE_DATA_STORE);
    objectStore.openCursor().onsuccess = function (e) {
        var cursor = e.target.result;
        if (cursor) {
           blobArray.push(cursor.value.blob); 
           cursor.continue();
        }
        else
        {
            // completed 
        }
    }

// blobArray will be used for second time << Second Write

Answer 1

我想通了。第一次存储文件实例 blob。我已将文件实例 blob 更改为数组缓冲区，只是为了确保在两种情况下数据类型相似。现在需要相同的时间。

 for (var i = 0; i < inputFiles.files.length; i++) {
    let file = inputFiles.files[i];
    file.arrayBuffer().then((arrayBuffer) => {
        let blob = new Blob([new Uint8Array(arrayBuffer)], {type: file.type });
        blobs.push(blob);
        if ( blobs.length == inputFiles.files.length){
            callback(blobs);
        }
    });
}

为什么第二次将相同的数据写入 IndexedDB 总是变慢？

1 个答案: