Web Tarayıcısı (Chromium / Firefox) dosya iletişiminden sonra 1-2 saniye boyunca yanıt vermiyor

Bir dosyayı dosya iletişim kutusundan seçtikten ve Tamam'ı tıkladıktan sonra yanıt vermeme / sayfa gecikmesini kaldırmak için bu kodu nasıl geliştirebilirim?

Yaklaşık 50-100 KB boyutlarındaki dosyaları test ediyorum

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>

Snippet'i genişlet

Bu sayfayı localhost üzerinde çalıştırıyorum ve SSD kullanıyorum

Teşekkürler

javascript html

— Joelty
kaynak

Not: <input>etiketi kullanmaz ve kapatma eğik çizgisine ihtiyaç duymaz ve asla HTML'de yoktur.

— Rob

Formu gönderdikten sonra, dosyaların sunucuya iletilmesi gerekir ve tarayıcı bir yanıt bekler (bu hatalar içerebilir).

— Sivri

@Kaiido Sadece bir dosya. İşletim Sistemi: Windows .. dosya iletişim kutusuna When happens the lag, before the dialog appears?tıkladıktan Opensonra, kaybolduktan sonra

— Joelty

başka bir bilgisayarla da denedin mi? bu sistem performansınızdan gelebilir

— BrightFaith

Kodunuzu kopyaladım, bir HTML dosyasına koydum ve masaüstünden çalıştırdım. Bu saf javascript olduğundan "sunucu" gerekmez. Hangi dosyaları seçersem seçeyim gecikme bulamıyorum.

— KIKO Software

Yanıtlar:

Kodunuz gayet iyi. Daha fazla araştırma yapmak için performansı ölçmeyi deneyin :

— joe
kaynak

HandleFileSelect işlevinizde Promises kullanın veya işlevini zaman uyumsuz hale getirin.

— Şahid Jamal
kaynak

Kodunuz çalışır ve bununla ilgili yanlış bir şey yoktur. Performansı yalnızca önce ölçüp ardından uygun işlemleri yaparak geliştirebilirsiniz.

Örneğin, kodu daha temiz bir yaklaşımla yeniden düzenleyebilirsiniz -

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>

Snippet'i genişlet

— Varun Goel
kaynak