ArrayBuffer 和 Blob 对象的内存使用情况

Question

我正在获取 ArrayBuffer 数据块，并将每个块添加到

web worker

上的数组中，当我获取所有块时，我将该块数组转换为 blob。

//worker.js

const array = []

this.onmessage = function(e){
     if(e.data.done)
     {
        const blob = new Blob(array);
        this.postMessage(blob)
        shunks.length = 0
     }
     else
     {
         array.push(e.data.chunk)
     }
}

我的问题是

1. 如果数组大小达到 2GB，它将存储在内存中，对吗？这意味着我无法用大于可用内存的数据填充该数组？
2. 当我从该数组创建一个 blob 时，该 blob 还会占用另外 2GB 空间吗？ 从记忆中？

Answer 1

这取决于...

理论上，是的，每个 ArrayBuffer 将占用内存中的

byteLength

，是的，由它生成的 Blob 将占用内存中的 new 空间。

然而，浏览器可能会在这里使用一些优化，例如 IIRC Chrome 确实将其 Blob 保存在用户的磁盘上，而不是增加内存，我相信他们可以对 ArrayBuffers 使用类似的技巧。

因此，如果可能的话，最好为每个较小的块构建一个 Blob（因为每个“块”Blob 都会保存在磁盘上），但这非常不确定，并且依赖于强有力的假设。如果您需要安全，最好假设它会在记忆中，并且您有达到极限的风险。 如果您确实需要处理大文件，您可以考虑流，例如新的

File System Access

API 允许我们以流的形式写入磁盘。在无法访问的系统上，您可以尝试将每个块保存在 IndexedDB 中。

Answer 2

typescriptlang

。

const baseArray = new Uint8ClampedArray(1_000_000_000);

console.log(baseArray.length)
const start = performance.now();


function f() {
    const n = 10;

    for (var i = 1; i < n; ++i) {
        const b = new Blob([baseArray]);
        console.log(b.size)
    }
}

f();

const end = performance.now();

const duration = end - start;
console.log(duration / 1000)

由于复制/额外分配，执行时间约为 2 秒。如果将 n 设置为 1000，则会发生崩溃。 TLDR：Blob 从其参数复制数据。