Webブラウザ（Chromium / Firefox）は、ファイルダイアログの後、1〜2秒間応答しなくなります。

ファイルダイアログからファイルを選択して[OK]をクリックした後、このコードを改善して無応答性/ページラグを削除するにはどうすればよいですか？

サイズが50〜100 KBのファイルをテストしています

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
      f.size, ' bytes, last modified: ',
      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
      '</li>');
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

スニペットを展開

このページをlocalhostで実行していて、SSDを使用しています

ありがとう

javascript html

— ジョエルティ
ソース

注：<input>タグは使用せず、終了スラッシュを必要とせず、HTMLにはありません。

— ロブ

フォームを送信した後、ファイルをサーバーに送信する必要があり、ブラウザーは応答（エラーなどが含まれる場合があります）を待ちます。

— とがった

@海道ただ一つのファイル。OS：Windows .. ファイルダイアログをWhen happens the lag, before the dialog appears?クリックOpenした後、消えた後

— Joelty

他のコンピュータでも試しましたか？これはシステムパフォーマンスに

— 起因

コードをコピーしてHTMLファイルに入れ、デスクトップから実行しました。これは純粋なJavaScriptなので、「サーバー」は必要ありません。どのファイルを選択しても、遅延はありません。

— KIKOソフトウェア

回答:

あなたのコードは完璧です。試してみてください測定をさらに調査するためにパフォーマンスを：

— jzzfs
ソース

handleFileSelect関数でPromiseを使用するか、それを非同期関数にします。

— シャヒドジャマル
ソース

コードは機能し、問題はありません。パフォーマンスを改善するには、まずコードを測定してから適切なアクションを実行する必要があります。

たとえば、コードをよりクリーンな方法にリファクタリングできます-

let handleFileSelect = (evt) => {
  let files = evt.target.files; // FileList object

  let output = [...files].map((file) => {
    return `<li>
                <strong>${escape(file.name)}</strong> 
                (${file.type || "n/a"}) - ${file.size} bytes,
                 last modified: ${
                   file.lastModifiedDate
                     ? file.lastModifiedDate.toLocaleDateString()
                     : "n/a"
                 }
                </li>`;
  });

  document.getElementById("list").innerHTML = `<ul>${output.join("")}</ul>`;
};

document
  .getElementById("files")
  .addEventListener("change", handleFileSelect, false);

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

スニペットを展開

— ヴァルンゴエル
ソース