Der Webbrowser (Chromium / Firefox) reagiert nach dem Dateidialog für 1-2 Sekunden nicht mehr

Wie kann ich diesen Code verbessern, um Unempfindlichkeit / Seitenverzögerung zu beseitigen, nachdem ich eine Datei aus dem Dateidialog ausgewählt und auf OK geklickt habe?

Ich habe Dateien mit Größen zwischen 50 und 100 KB getestet

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>

Erweitern Sie das Snippet

Ich führe diese Seite auf localhost aus und verwende SSD

Vielen Dank

javascript html

— Joelty
quelle

Hinweis: Das <input>Tag wird nicht verwendet und benötigt keinen schließenden Schrägstrich und hat nie in HTML.

— Rob

Nachdem Sie das Formular gesendet haben, müssen die Dateien an den Server übertragen werden, und der Browser wartet auf eine Antwort (die Fehler usw. enthalten kann).

— Pointy

@ Kaiido Nur eine Datei. Betriebssystem: Windows .. When happens the lag, before the dialog appears?nach dem Klicken Openim

— Dateidialog

Hast du es auch mit einem anderen Computer versucht? Dies kann von Ihrer Systemleistung

— herrühren

Ich habe Ihren Code kopiert, in eine HTML-Datei eingefügt und vom Desktop ausgeführt. Da dies reines Javascript ist, wird kein "Server" benötigt. Ich kann keine Verzögerung finden, egal welche Dateien ich auswähle.

— KIKO Software

Antworten:

Ihr Code ist vollkommen in Ordnung. Versuchen Sie , die Leistung zu messen , um weitere Untersuchungen durchzuführen:

— jzzfs
quelle

Verwenden Promises in Ihrer handleFileSelect Funktion oder make async Funktion davon.

— Shahid Jamal
quelle

Ihr Code funktioniert und es ist nichts falsch daran. Sie können die Leistung nur verbessern, indem Sie ihn zuerst messen und dann geeignete Maßnahmen ergreifen.

Zum Beispiel können Sie den Code zu einem saubereren Ansatz umgestalten -

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>

Erweitern Sie das Snippet

— Varun Goel
quelle