文件对话框后，Web浏览器（Chromium / Firefox）停止响应1-2秒

从文件对话框中选择文件并单击“确定”后，如何改善此代码以消除不响应/页面滞后？

我一直在测试大小约为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

谢谢

javascript html

— 乔蒂
source

注意：<input>标记不使用，不需要斜杠，HTML中也没有。

— 罗布

提交表单后，必须将文件传输到服务器，浏览器等待响应（可能包含错误等）。

— 尖尖的

@Kaiido只需一个文件。操作系统：Windows .. When happens the lag, before the dialog appears?在单击Open文件对话框后，因此消失了

— Joelty

您也尝试过使用其他计算机吗？这可能

— 取决于

我复制了您的代码，将其放入HTML文件中，然后从桌面运行它。由于这是纯JavaScript，因此不需要“服务器”。无论选择哪个文件，我都找不到延迟。

— KIKO Software

Answers:

您的代码非常好。尝试评估效果以进一步调查：

— zz
source

在handleFileSelect函数中使用Promises 或使其异步功能。

— 沙希德·贾马尔
source

您的代码可以正常工作，没有任何问题。您只能通过先测量代码然后采取适当的措施来提高性能。

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

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>

展开摘要

— 瓦伦·高尔
source