JS new FileReader() 非同期なのに読み込み完了まで操作不能になるのはなぜ

Question

new FileReader()で1MBのファイルを読み込みしたとします
読み込んでる間（読み込み完了までの間）
ブラウザがフリーズ状態になります
プログレスで見ると８０％まではすんなり読み込みされるものの残り２０％は１秒に１％づつ読み込んでるような状態です
その影響でブラウザが操作不能になり、完了までうんともすんともいわなくなります
非同期なのになぜですか？
setIntervalを回しつつ、setIntervalと別でnew FileReader()の読み込み処理をかけると読み込み完了までsetIntervalが停止しているのか、そのような錯覚かわかりませんが、全て停止されている（実際は動いているかもしれませんが）フリーズ現象のようなことが起こります
これは私のPCスペックがクソで読み込みが遅い＝メモリ負荷による問題でしょうか？

Comments

[yambejp]

状況がわからないです。
ローカルの1Mのファイルをtype=fileで掴んだあと読み込ませているのでしょうか？
とりあえず現象が確認できるソースを提示ください。

[Lhankor_Mhy]

具体的な解決方法を知りたいのであれば、コードをご提示いただいた方がいいかもしれません。
たとえば、setInterval をアニメーションに使っているなど、他の部分のコードに問題がある可能性もあるかと思います。
どうしてもの場合は、FileReader はワーカーで使えるので外に出してしまう、というのも手かと思います。

また、FileReader って現在の実装ですと、回答にあるようなストリーム処理とか、なにか低レベルな処理をするとき以外には使わないと思います。たいていの場合、Blob のインターフェースで事が済んでしまうと思うので。

Answer 1

元のものは File でしょうか？ それなら 直接 .stream() で逐次読み出しすれば いいのでは……？

/** @type {File} */
const file;

for await (const text of file.stream().pipeThrough(new TextDecoderStream()))
  console.log(text);

Blob: stream() メソッド - Web API | MDN

TextDecoderStream - Web API | MDN

読み込むコード例

こんな感じで良いのでは？

openReadButton.addEventListener("click", openReadStart);

/**
 * ファイルの読み込みを実施する関数
 */
async function openReadStart() {
  const file = await showPicker();
  log(`file: name:${file.name} size:${file.size}`);
  const arrayBuffer = await readToArrayBuffer(file, ({ offset, length }) =>
    log(`read ... ${offset}/${length}`),
  );
  log(`read complete: ${arrayBuffer.byteLength} byte`);
  console.log(arrayBuffer);
}

/**
 * ファイルを選択する
 */
async function showPicker() {
  const input = document.createElement("input");
  input.type = "file";
  const { resolve, promise } = Promise.withResolvers();
  input.addEventListener("change", resolve);
  input.showPicker();
  await promise;
  return input.files[0];
}

/**
 * ファイルを arrayBuffer に変換する
 */
async function readToArrayBuffer(file, progress) {
  const array = new ArrayBuffer(file.size, { maxByteLength: file.size });
  array.byteOffset = 0;
  const buffer = new Uint8Array(array);
  let offset = 0;
  const iterator = file.stream();
  for await (const value of iterator) {
    buffer.set(value, offset);
    offset += value.byteLength;
    if (progress) await progress({ offset, length: file.size });
  }
  return buffer.buffer;
}

https://livecodes.io/?x=id/bs5ddwfa9w2

1GB 読み込んでみましたが特に問題無いです。

ちなみに1GBのファイルは次のコマンドで作成しました。

fsutil file createnew file.txt 1073741824

Answer 2

new FileReader()で1GBを読み込んだ場合、さらに遅延 下手したらブラウザの強制終了が発生するかと思われますが、
このケースについてどう対応したらいいのでしょうか

Comments

[utm.]

1GBを読み込んだ場合、さらに遅延 下手したらブラウザの強制終了が発生するかと思われますが、
> このケースについてどう対応したらいいのでしょうか

この質問は曖昧です。
ファイルと言っても様々な種類がありますから、
例えば画像で1GBあって、全て読み込まないと意味が無いのであれば、ファイルサイズを確認する処理を入れて、事前に操作している人へメッセージを出した方がよいかも知れませんし、
テキストであれば1行ずつパーティションをかけて読み込めるかもしれません。
ファイル形式は様々ありますが、
それらはどういった目的でするのかによって、内容が異なりますよね。

聞いてみただけでは無いのであれば詳細を記載することをおすすめします。
一般的な発想でいえば回答にもあるようにStreamを使い一度に全てを読み込まないということが挙げられます。

[juner]

用途に依る気がするのですが、 普通に Stream 処理した感じだと 特に問題無く 1GB 読み込めたのでなんとも感あります。（私の回答参照のこと