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