JavaScript FileReader 切片性能

Question

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

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

对于大文件，这需要很长时间，但据我所知，只需要访问文件的前几个字节。后台是否有一些实现需要在切片之前访问整个文件？它是否取决于 FileApi 的浏览器实现？我目前在 Chrome 和 Edge（铬）中进行了测试。

使用性能开发工具在 Chrome 中进行分析显示 reader.onloadend 之前有大量空闲时间，并且 ram 使用量没有增加。然而，这可能是因为 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);
});