파일 대화 상자 후 웹 브라우저 (Chromium / Firefox)가 1-2 초 동안 응답하지 않음

파일 대화 상자에서 파일을 선택한 후 확인을 클릭 한 후 무응답 / 페이지 지연을 제거하기 위해이 코드를 개선하려면 어떻게해야합니까?

크기가 약 50-100KB 인 파일을 테스트했습니다.

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에 포함되지 않습니다.

— Rob

양식을 제출하면 파일이 서버로 전송되어야하고 브라우저는 응답을 기다립니다 (오류 등이있을 수 있음).

— Pointy

@Kaiido 하나의 파일. OS : Windows .. 파일 대화 상자를 When happens the lag, before the dialog appears?클릭 Open한 후 사라진 후

— Joelty

다른 컴퓨터에서도 시도해 보셨습니까? 이것은 시스템 성능에서 나올 수 있습니다

— BrightFaith

코드를 복사하여 HTML 파일에 넣고 데스크탑에서 실행했습니다. 이것은 순수한 자바 스크립트이므로 "서버"는 필요하지 않습니다. 어떤 파일을 선택하더라도 지체없이 찾을 수 있습니다.

— KIKO Software

답변:

귀하의 코드는 완벽합니다. 시도 측정 추가 조사를 성능 :

— jzzfs
소스

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>

스 니펫 확장

— 바룬 고엘
소스