Веб-браузер (Chromium / Firefox) стає невідповідним протягом 1-2 сек після діалогового вікна файлу

Як я можу вдосконалити цей код, щоб усунути невідповідність / відставання сторінки після вибору файлу з діалогового вікна файлу та натискання кнопки ОК?

Я тестував файли розміром близько 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>

Розгорніть фрагмент

Я запускаю цю сторінку в localhost і використовую SSD

Дякую

javascript html

— Джоелті
джерело

Примітка: <input>тег не використовується та не потребує косої косий риси, і ніколи не має HTML.

— Роб

Після надсилання форми файли повинні бути передані на сервер, і браузер чекає відповіді (яка може містити помилки тощо).

— Pointy

@Kaiido Лише один файл. ОС: Windows .. When happens the lag, before the dialog appears?після клацання Openу діалоговому вікні файлу, тому після його зникнення

— Joelty

Ви пробували і з іншим комп'ютером? це може бути результатом вашої системи

— BrightFaith

Я скопіював ваш код, поклав його у файл HTML і запустив його з робочого столу. Оскільки це чистий javascript, "сервер" не потрібен. Я не можу знайти затримки, незалежно від того, які файли я вибрав.

— Програмне забезпечення KIKO

Відповіді:

Ваш код ідеально чудовий. Спробуйте виміряти ефективність для подальшого дослідження:

— Джо
джерело

Використовуйте Обіцяння у функції handleFileSelect або зробіть функцію асинхронізації .

— шахідський джамал
джерело

Ваш код працює, і в цьому немає нічого поганого. Ви можете покращити продуктивність лише спочатку вимірявши його, а потім вживши відповідних дій.

Наприклад, наприклад, ви можете повернути код до більш чистого підходу -

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>

Розгорніть фрагмент

— Варун Гель
джерело