为什么将相同的数据第二次写入 IndexedDB 的速度始终较慢？

Question

我在 IndexedDB 中 Blob 存储了一些 jpeg 文件（正好 350 个，相同文件大小相同。总计：336.14 MB）。完成交易大约需要 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);
        }
    });
}