O Navegador da Web (Chromium / Firefox) deixa de responder por 1-2s após o diálogo do arquivo

Como posso melhorar esse código para remover a falta de resposta / atraso na página depois de selecionar um arquivo da caixa de diálogo e clicar em OK?

Venho testando arquivos com tamanhos entre 50 e 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>

Expandir snippet

Estou executando esta página no localhost e usando SSD

obrigado

javascript html

— Joelty
fonte

Nota: a <input>tag não usa e não precisa de uma barra e nunca tem em HTML.

— Rob

Após o envio do formulário, os arquivos precisam ser transmitidos ao servidor e o navegador aguarda uma resposta (que pode conter erros, etc.).

— Pointy

@Kaiido Apenas um arquivo. OS: Windows .. When happens the lag, before the dialog appears?depois de clicar Openna caixa de diálogo do arquivo, depois desaparecer

— Joelty

você já tentou com outro computador também? isso pode resultar do desempenho do sistema

— BrightFaith

Copiei seu código, coloquei-o em um arquivo HTML e executei-o na área de trabalho. Como esse é um javascript puro, não é necessário "servidor". Não encontro atrasos, independentemente dos arquivos selecionados.

— KIKO Software

Respostas:

Seu código está perfeitamente correto. Tente medir o desempenho para investigar mais:

— jzzfs
fonte

Use Promises em sua função handleFileSelect ou faça a função assíncrona dela.

— shahid jamal
fonte

Seu código funciona e não há nada errado com ele. Você só pode melhorar o desempenho medindo-o primeiro e depois tomando as ações apropriadas.

Por exemplo, você pode refatorar o código para uma abordagem mais limpa -

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>

Expandir snippet

— Varun Goel
fonte