JavaScript FileReader 切片性能

Question

我正在尝试使用 JavaScript 中的 FileApi 访问文本文件的前几行。

为此，我从文件开头切分任意数量的字节并将 blob 交给FileReader。

对于大文件，这需要很长时间，尽管我目前的理解是只需要访问文件的前几个字节。

• 是否有一些后台实现需要访问整个文件才能对其进行切片？
• 它是否依赖于 FileApi 的浏览器实现？

我目前已经在 Chrome 和 Edge (chromium) 中进行了测试。

使用性能开发工具在 Chrome 中进行的分析显示，在reader.onloadend 之前有很多空闲时间，并且内存使用量没有增加。然而，这可能是因为FileApi 是在浏览器本身中实现的，并且不会反映在 JavaScript 性能统计信息中。

我的 FileReader 实现如下所示：

const reader = new FileReader();

reader.onloadend = (evt) => {
  if (evt.target.readyState == FileReader.DONE) {
    console.log(evt.target.result.toString());
  }
};

// Slice first 10240 bytes of the file
var blob = files.item(0).slice(0, 1024 * 10);

// Start reading the sliced blob
reader.readAsBinaryString(blob);

这很好用，但如前所述，对于大文件的效果并不理想。我尝试了 10kb、100mb 和 6gb。记录前 10kb 的时间似乎与文件大小直接相关。

关于如何提高读取文件开头的性能的任何建议？

---

编辑： 遗憾的是，使用@BenjaminGruenbaum 建议的响应和 DOM 流并不能提高读取性能。

var dest = newWritableStream({​​​​​​​​
    write(str) {​​​​​​​​
        console.log(str);
    }​​​​​​​​,
}​​​​​​​​);
var blob = files.item(0).slice(0, 1024 * 10);

(blob.stream ? blob.stream() : newResponse(blob).body)
// Decode the binary-encoded response to string
  .pipeThrough(newTextDecoderStream())
  .pipeTo(dest)
  .then(() => {​​​​​​​​
      console.log('done');
  }​​​​​​​​);

Answer 1

这个怎么样！！

function readFirstBytes(file, n) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file.slice(0, n));
  });
}

readFirstBytes('file', 10).then(buffer => {
  console.log(buffer);
});