Веб-браузер (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>

Развернуть фрагмент

Я запускаю эту страницу на локальном хосте и использую SSD

Спасибо

javascript html Joelty
источник

Примечание: <input>тег не использует и не требует закрывающей косой черты и никогда не используется в HTML.

Роб

После отправки формы файлы должны быть переданы на сервер, и браузер ожидает ответа (который может содержать ошибки и т. Д.).

Заостренный

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

Joelty

ты пробовал с другим компьютером тоже? это может

зависеть

Я скопировал ваш код, поместил его в файл HTML и запустил с рабочего стола. Так как это чистый JavaScript, никакой "сервер" не требуется. Я не могу найти задержки, независимо от того, какие файлы я выбираю.

KIKO Software

Ответы:

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

jzzfs
источник

Используйте Promises в своей функции 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>

Развернуть фрагмент

Варун Гоэль
источник