javascript - 将Blob内容读取到现有的SharedArrayBuffer中

我试图找到最有效的方法来将Blob的内容读取到现有的SharedArrayBuffer中，该方法的发起者是等待缓冲区填充的工作程序。就我而言，我可以保证SharedArrayBuffer的长度至少足以容纳Blob的全部内容。我想出的最好方法是：

// Assume 'blob' is the blob we are reading
// and 'buffer' is the SharedArrayBuffer.
const fr = new FileReader();
fr.addEventListener('load', e =>
  new Uint8Array(buffer).set(new Uint8Array(e.target.result)));
fr.readAsArrayBuffer(blob);

这似乎效率很低，尤其是在读取的Blob相对较大的情况下。

最佳答案

Blob不是Transferable对象。此外，在.readAsSharedArrayBuffer上没有可用的FileReader方法。

但是，如果您只需要同时从多个工作程序中读取Blob，我相信您可以使用URL.createObjectURL()和fetch来实现，尽管我没有对多个工作程序进行过测试：

// === main thread ===
let objectUrl = URL.createObjectURL(blob);
worker1.postMessage(objectUrl);
worker2.postMessage(objectUrl);

// === worker 1 & 2 ===
self.onmessage = msg => {
    fetch(msg.data)
        .then(res => res.blob())
        .then(blob => {
            doSomethingWithBlob(blob);
        });
};

否则，据我所知，确实没有一种有效的方法将数据从文件加载到SharedArrayBuffer中。

我在这里还提供了一种方法，用于将blob的块从主线程转移到单个工作程序。对于我的用例，文件太大了，无论如何（无论是否共享）都无法将全部内容读取到单个数组缓冲区中，因此我使用.slice来处理块。这样的事情将使您可以使用.postMessage Transferable通过多个ArrayBuffer调用以类似流的方式将大量数据传递给单个工作者：

// === main thread ===
let eof = false;
let nextBuffer = null;
let workerReady = true;

let read = 0;
function nextChunk() {
    let end = read + chunkSize;
    if(end >= file.length) {
        end = file.length;
        eof = true;
    }

    let slice = file.slice(read, end);
    read = end;

    fr.readAsArrayBuffer(slice);
}

fr.onload = event => {
    let ab = event.target.result;

    if(workerReady) {
        worker.postMessage(ab, [ab]);
        workerReady = false;
        if(!eof) nextChunk();
    }
    else {
        nextBuffer = ab;
    }
};

// wait until the worker finished the last chunk
// ... otherwise we'll flood main thread's heap
worker.onmessage = msg => {
    if(nextBuffer) {
        worker.postMessage(nextBuffer, [nextBuffer]);
        nextBuffer = null;
    }
    else if(!eof && msg.ready) {
        nextChunk();
    }
};

nextChunk();


// === worker ===
self.onmessage = msg => {
    let ab = msg.data;
    // ... do stuff with data ...
    self.postMessage({ready:true});
};

这会将数据块读入主线程的ArrayBuffer中，并将其传输给工作程序，然后将下一个数据块读入内存，同时等待工作程序处理前一个数据块。这基本上可以确保两个线程始终保持忙碌状态。

关于javascript - 将Blob内容读取到现有的SharedArrayBuffer中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44768386/