Browser Web (Chromium / Firefox) menjadi tidak responsif selama 1-2 detik setelah dialog file

Bagaimana saya dapat meningkatkan kode ini untuk menghapus ketidaktanggapan / kelambatan halaman setelah memilih file dari dialog file dan mengklik OK?

Saya sudah menguji file dengan ukuran sekitar 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>

Luaskan cuplikan

Saya menjalankan halaman ini di localhost dan saya menggunakan SSD

Terima kasih

javascript html

— Joelty
sumber

Catatan: <input>tag tidak menggunakan dan tidak membutuhkan garis miring penutup dan tidak pernah memiliki HTML.

— Rob

Setelah Anda mengirimkan formulir, file harus dikirim ke server, dan browser menunggu tanggapan (yang mungkin mengandung kesalahan, dll).

— Runcing

@ Kaiido Hanya satu file. OS: Windows .. When happens the lag, before the dialog appears?setelah mengklik Opendalam dialog file, jadi setelah itu menghilang

— Joelty

Sudahkah Anda mencoba dengan komputer lain juga? ini bisa datang dari kinerja sistem Anda

— BrightFaith

Saya menyalin kode Anda, memasukkannya ke file HTML, dan menjalankannya dari desktop. Karena ini adalah javascript murni, "server" tidak diperlukan. Saya tidak dapat menemukan penundaan, tidak peduli file mana yang saya pilih.

— Perangkat Lunak KIKO

Jawaban:

Kode Anda baik-baik saja. Coba ukur kinerja untuk menyelidiki lebih lanjut:

— jzzfs
sumber

Gunakan Janji di fungsi handleFileSelect Anda atau buat fungsi asinkron darinya.

— shahid jamal
sumber

Kode Anda berfungsi dan tidak ada yang salah dengannya. Anda hanya dapat meningkatkan kinerja dengan terlebih dahulu mengukurnya dan kemudian mengambil tindakan yang sesuai.

Misalnya, Anda dapat mengubah kode menjadi pendekatan yang lebih bersih -

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>

Luaskan cuplikan

— Varun Goel
sumber