El navegador web (Chromium / Firefox) deja de responder durante 1-2 segundos después del diálogo del archivo

¿Cómo puedo mejorar este código para eliminar la falta de respuesta / retraso de la página después de seleccionar un archivo del cuadro de diálogo de archivo y hacer clic en Aceptar?

He estado probando archivos con tamaños de alrededor de 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>

Expandir fragmento

Estoy ejecutando esta página en localhost y estoy usando SSD

Gracias

javascript html

— Joelty
fuente

Nota: la <input>etiqueta no usa y no necesita una barra diagonal de cierre y nunca lo ha hecho en HTML.

— Rob

Después de enviar el formulario, los archivos deben transmitirse al servidor y el navegador espera una respuesta (que puede contener errores, etc.).

— Puntiagudo

@Kaiido Solo un archivo. Sistema operativo: Windows ... When happens the lag, before the dialog appears?después de hacer clic Openen el cuadro de diálogo de archivo, así que después de que desaparezca

— Joelty

¿Has probado con otra computadora también? esto puede provenir del rendimiento de su sistema

— BrightFaith

Copié su código, lo puse en un archivo HTML y lo ejecuté desde el escritorio. Como esto es javascript puro, no se necesita "servidor". No puedo encontrar ningún retraso, sin importar qué archivos seleccione.

— Software KIKO

Respuestas:

Tu código está perfectamente bien. Intente medir el rendimiento para investigar más a fondo:

— jzzfs
fuente

Use Promesas en su función handleFileSelect o haga una función asincrónica de la misma.

— shahid jamal
fuente

Su código funciona y no tiene nada de malo. Solo puede mejorar el rendimiento midiéndolo primero y luego tomando las medidas adecuadas.

Por ejemplo, puede refactorizar el código para un enfoque más limpio:

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 fragmento

— Varun Goel
fuente