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