文件对话框后 Web 浏览器 (Chromium/Firefox) 无响应 1-2 秒

Question

从文件对话框中选择文件并单击“确定”后，如何改进此代码以消除无响应/页面延迟？我一直在测试大小约为 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>我在本地主机上运行此页面并且使用 SSD

Answer 1

你的代码完全没问题。尝试测量性能以进一步调查：

Answer 2

在你的handleFileSelect函数中使用Promises或者让它成为异步函数。

Answer 3

您的代码可以运行并且没有任何问题。您只能通过首先对其进行测量然后采取适当的操作来提高性能。

例如，您可以将代码重构为更简洁的方法 -

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>