Web Browser (Chromium/Firefox) becomes unresponsive for 1-2sec after file dialog

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 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>

Answer 2

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

Answer 3

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

---