ওয়েব ব্রাউজার (ক্রোমিয়াম / ফায়ারফক্স) ফাইল ডায়ালগের পরে 1-2 সেকেন্ডের জন্য প্রতিক্রিয়াহীন হয়ে ওঠে

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>ট্যাগটি ব্যবহার করে না এবং একটি ক্লোজিং স্ল্যাশের প্রয়োজন নেই এবং এটি এইচটিএমএলে কখনও নেই।

— রব

আপনি ফর্মটি জমা দেওয়ার পরে ফাইলগুলি সার্ভারে প্রেরণ করতে হবে এবং ব্রাউজারটি একটি প্রতিক্রিয়ার জন্য অপেক্ষা করে (যাতে ত্রুটি ইত্যাদি থাকতে পারে)।

— পয়েন্টি

@ কাইডো মাত্র একটি ফাইল। ওএস: উইন্ডোজ .. ফাইল সংলাপে When happens the lag, before the dialog appears?ক্লিক Openকরার পরে, তাই এটি অদৃশ্য হওয়ার পরে

— জোয়েল্টি

আপনি কি অন্য কম্পিউটারের সাথে চেষ্টা করেছেন? এটি আপনার সিস্টেমের পারফরম্যান্স থেকে আসতে পারে

— ব্রাইটফেইথ

আমি আপনার কোডটি অনুলিপি করেছি, এটি একটি HTML ফাইলে রেখেছি এবং ডেস্কটপ থেকে চালিয়েছি ran যেহেতু এটি খাঁটি জাভাস্ক্রিপ্টের কোনও "সার্ভার" দরকার নেই। আমি কোন ফাইল নির্বাচন করি তা বিবেচনা না করে আমি কোনও বিলম্ব খুঁজে পাচ্ছি না।

— KIKO সফটওয়্যার

Answer 1

আপনার কোড পুরোপুরি ঠিক আছে। আরও তদন্ত করতে পারফরম্যান্সটি পরিমাপ করার চেষ্টা করুন :

---

Answer 2

আপনার হ্যান্ডেলফিল নির্বাচন ফাংশনে প্রতিশ্রুতি ব্যবহার করুন বা এটির async ফাংশন তৈরি করুন।

Answer 3

আপনার কোডটি কাজ করে এবং এতে কোনও ভুল নেই You আপনি কেবল প্রথমে এটি পরিমাপ করে এবং তারপরে উপযুক্ত পদক্ষেপ গ্রহণের মাধ্যমে কর্মক্ষমতা উন্নত করতে পারেন।

উদাহরণস্বরূপ আপনি একটি ক্লিনার পদ্ধতির কোডটি রিফ্যাক্টর করতে পারেন -

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>