Il browser Web (Chromium / Firefox) non risponde per 1-2 secondi dopo la finestra di dialogo del file

Come posso migliorare questo codice per rimuovere la mancata risposta / ritardo pagina dopo aver selezionato un file dalla finestra di dialogo del file e aver fatto clic su OK?

Ho testato file con dimensioni comprese tra 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>

Espandi frammento

Sto eseguendo questa pagina su localhost e sto usando SSD

Grazie

javascript html

— Joelty
fonte

Nota: il <input>tag non utilizza e non necessita di una barra di chiusura e non è mai presente in HTML.

— Rob

Dopo aver inviato il modulo, i file devono essere trasmessi al server e il browser attende una risposta (che può contenere errori, ecc.).

— Punta

@Kaiido Solo un file. When happens the lag, before the dialog appears?Open

— Sistema

hai provato anche con altri computer? ciò può derivare dalle prestazioni del sistema

— BrightFaith

Ho copiato il tuo codice, l'ho messo in un file HTML e l'ho eseguito dal desktop. Poiché questo è javascript puro, non è necessario alcun "server". Non riesco a trovare alcun ritardo, indipendentemente dai file selezionati.

— Software KIKO

Risposte:

Il tuo codice è perfetto. Prova a misurare le prestazioni per indagare ulteriormente:

— jzzfs
fonte

Utilizzare Promises nella funzione handleFileSelect o renderne asincrona la funzione.

— Shahid Jamal
fonte

Il tuo codice funziona e non c'è niente di sbagliato in esso. Puoi solo migliorare le prestazioni misurandolo prima e poi intraprendendo le azioni appropriate.

Ad esempio, è possibile riformattare il codice in un approccio più pulito -

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>

Espandi frammento

— Varun Goel
fonte