Trình duyệt web (Chromium / Firefox) không phản hồi trong 1-2 giây sau hộp thoại tệp

Làm cách nào tôi có thể cải thiện mã này để loại bỏ sự không phản hồi / độ trễ trang sau khi chọn tệp từ hộp thoại tệp và nhấp vào OK?

Tôi đã thử nghiệm các tệp có kích thước khoảng 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>

Mở rộng đoạn trích

Tôi đang chạy trang này trên localhost và tôi đang sử dụng SSD

Cảm ơn

javascript html

— Jo sĩ
nguồn

Lưu ý: <input>thẻ không sử dụng và không cần dấu gạch chéo và không bao giờ có trong HTML.

— Cướp

Sau khi bạn gửi biểu mẫu, các tệp phải được truyền đến máy chủ và trình duyệt chờ phản hồi (có thể chứa lỗi, v.v.).

— Mũi nhọn

@Kaiido Chỉ cần một tập tin. HĐH: Windows .. When happens the lag, before the dialog appears?sau khi nhấp Openvào hộp thoại tập tin, vì vậy sau khi nó biến mất

— Jo ERIC

bạn đã thử với máy tính khác chưa? điều này có thể đến từ hiệu suất hệ thống của bạn

— BrightFaith

Tôi đã sao chép mã của bạn, đặt nó vào một tệp HTML và chạy nó từ máy tính để bàn. Vì đây là javascript thuần nên không cần "máy chủ". Tôi không thể tìm thấy độ trễ, bất kể tôi chọn tập tin nào.

— Phần mềm KIKO

Câu trả lời:

Mã của bạn là hoàn toàn tốt. Hãy thử đo hiệu suất để điều tra thêm:

— jzzfs
nguồn

Sử dụng Promises ở của bạn handleFileSelect chức năng hoặc làm async chức năng của nó.

— shahid Jamal
nguồn

Mã của bạn hoạt động và không có gì sai với nó. Bạn chỉ có thể cải thiện hiệu suất bằng cách trước tiên đo nó và sau đó thực hiện các hành động thích hợp.

Ví dụ: Bạn có thể cấu trúc lại mã theo cách tiếp cận sạch hơn -

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>

Mở rộng đoạn trích

— Dê Varun
nguồn