वेब ब्राउज़र (क्रोमियम / फ़ायरफ़ॉक्स) फ़ाइल संवाद के बाद 1-2sec के लिए अनुत्तरदायी बन जाता है

Question

फ़ाइल संवाद से फ़ाइल को हटाने और ओके पर क्लिक करने के बाद मैं इस कोड को कैसे सुधार सकता हूं?

मैं 50-100 केबी के आकार वाली फाइलों का परीक्षण कर रहा हूं

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>

मैं इस पृष्ठ को लोकलहोस्ट पर चला रहा हूं और मैं एसएसडी का उपयोग कर रहा हूं

धन्यवाद

Comments

नोट: <input>टैग का उपयोग नहीं करता है और इसे बंद करने की आवश्यकता नहीं है और HTML में कभी नहीं।

— रॉब

आपके द्वारा फ़ॉर्म सबमिट करने के बाद, फ़ाइलों को सर्वर को प्रेषित करना पड़ता है, और ब्राउज़र प्रतिक्रिया की प्रतीक्षा करता है (जिसमें त्रुटियां आदि हो सकती हैं)।

— नुकीले

@ कैइडो सिर्फ एक फाइल। ओएस: विंडोज .. फाइल डायलॉग में When happens the lag, before the dialog appears?क्लिक Openकरने के बाद, इसलिए गायब होने के बाद

— जोएलटी

क्या आपने अन्य कंप्यूटर के साथ भी कोशिश की है? यह आपके सिस्टम के प्रदर्शन से आ सकता है

— BrightFaith

मैंने आपका कोड कॉपी किया, उसे HTML फ़ाइल में डाला, और उसे डेस्कटॉप से ​​चलाया। चूंकि यह शुद्ध जावास्क्रिप्ट है, इसलिए "सर्वर" की आवश्यकता नहीं है। मुझे कोई देरी नहीं मिल रही है, चाहे मैं कोई भी फाइल चुनूं।

— KIKO सॉफ्टवेयर

Answer 1

आपका कोड पूरी तरह से ठीक है। आगे की जांच करने के लिए प्रदर्शन को मापने का प्रयास करें :

---

Answer 2

अपने में उपयोग वादे handleFileSelect समारोह या मेकअप async इसके बारे में कार्य करते हैं।

Answer 3

आपका कोड काम करता है और इसमें कुछ भी गलत नहीं है। आप केवल पहले इसे मापकर और फिर उचित कार्रवाई करके प्रदर्शन में सुधार कर सकते हैं।

उदाहरण के लिए, आप एक क्लीनर दृष्टिकोण के लिए कोड को रिफलेक्टर कर सकते हैं -

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>