Przeglądarka internetowa (Chromium / Firefox) przestaje odpowiadać przez 1-2 sekundy po oknie dialogowym pliku

Jak mogę poprawić ten kod, aby usunąć brak odpowiedzi / opóźnienie strony po wybraniu pliku z okna dialogowego pliku i kliknięciu OK?

Testowałem pliki o rozmiarach około 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>

Rozwiń fragment kodu

Korzystam z tej strony na localhost i używam SSD

Dzięki

javascript html

— Joelty
źródło

Uwaga: <input>znacznik nie używa i nie potrzebuje ukośnika zamykającego i nigdy nie ma w HTML.

— Rob

Po przesłaniu formularza pliki muszą zostać przesłane na serwer, a przeglądarka czeka na odpowiedź (która może zawierać błędy itp.).

— Pointy

@Kaiido Tylko jeden plik. System operacyjny: Windows .. When happens the lag, before the dialog appears?po kliknięciu Openw oknie dialogowym pliku, więc po jego zniknięciu

— Joelty

próbowałeś też z innym komputerem? może to wynikać z wydajności twojego systemu

— BrightFaith

Skopiowałem twój kod, umieściłem go w pliku HTML i uruchomiłem z pulpitu. Ponieważ jest to czysty skrypt javascript, nie jest potrzebny „serwer”. Nie mogę znaleźć opóźnienia, bez względu na to, które pliki wybiorę.

— Oprogramowanie KIKO

Odpowiedzi:

Twój kod jest w porządku. Spróbuj zmierzyć wydajność, aby dowiedzieć się więcej:

— Joe
źródło

Użyj obietnic w funkcji handleFileSelect lub włącz funkcję asynchroniczną .

— Szahid Jamal
źródło

Twój kod działa i nie ma w tym nic złego. Możesz poprawić wydajność, najpierw mierząc go, a następnie podejmując odpowiednie działania.

Na przykład możesz zmienić kod na czystszy -

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>

Rozwiń fragment kodu

— Varun Goel
źródło