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

Question

How can I improve this code in order to remove unresponsivness / page lag after selecing a file from file dialog and clicking OK?

I've been testing files with sizes around 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>

I'm running this page on localhost and I'm using SSD

Thanks

Answer 1

Your code is perfectly fine. Try measuring the performance to investigate further:

---

Answer 2

Use Promises in your handleFileSelect function or make async function of it.

Answer 3

Your code works and there is nothing wrong with it.You can only improve performance by first measuring it and then taking appropriate actions.

For eg You may refactor the code to a cleaner approach -

 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>