Le navigateur Web (Chromium / Firefox) ne répond plus pendant 1-2 secondes après la boîte de dialogue de fichier

Comment puis-je améliorer ce code afin de supprimer l'absence de réponse / décalage de page après avoir sélectionné un fichier dans la boîte de dialogue de fichier et cliqué sur OK?

J'ai testé des fichiers d'une taille d'environ 50 à 100 Ko

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>

Développer l'extrait

J'exécute cette page sur localhost et j'utilise SSD

Merci

javascript html

— Joelty
source

Remarque: la <input>balise n'utilise pas et n'a pas besoin d'une barre oblique de fermeture et n'a jamais en HTML.

— Rob

Après avoir soumis le formulaire, les fichiers doivent être transmis au serveur et le navigateur attend une réponse (qui peut contenir des erreurs, etc.).

— Pointy

@Kaiido Un seul fichier. OS: Windows .. When happens the lag, before the dialog appears?après avoir cliqué Opensur la boîte de dialogue du fichier, donc après sa disparition

— Joelty

avez-vous essayé avec un autre ordinateur aussi? cela peut provenir des performances de votre système

— BrightFaith

J'ai copié votre code, l'ai placé dans un fichier HTML et l'ai exécuté depuis le bureau. Comme il s'agit de javascript pur, aucun "serveur" n'est nécessaire. Je ne trouve aucun délai, quels que soient les fichiers que je sélectionne.

— KIKO Software

Réponses:

Votre code est parfaitement bien. Essayez de mesurer les performances pour approfondir:

— jzzfs
source

Utilisez Promises dans votre fonction handleFileSelect ou faites -en une fonction asynchrone .

— shahid jamal
source

Votre code fonctionne et il n'y a rien de mal à cela.Vous ne pouvez améliorer les performances qu'en le mesurant d'abord, puis en prenant les mesures appropriées.

Par exemple, vous pouvez refactoriser le code pour une approche plus propre -

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>

Développer l'extrait

— Varun Goel
source