페이지 : DOMContentLoaded,로드, 언로드 전, 언로드

HTML 페이지의 수명주기에는 세 가지 중요한 이벤트가 있습니다.

• DOMContentLoaded – 브라우저가 완전히로드 된 HTML 및 DOM 트리가 빌드되었지만 그림 <img> 및 스타일 시트와 같은 외부 리소스가 아직로드되지 않았을 수 있습니다.
• load – HTML뿐만 아니라 이미지, 스타일 등 모든 외부 리소스도로드됩니다.
• beforeunload/unload – 사용자가 페이지를 떠납니다.

각 이벤트가 유용 할 수 있습니다.

• DOMContentLoaded 이벤트 – DOM이 준비되었습니다. , 핸들러가 DOM 노드를 조회하고 인터페이스를 초기화 할 수 있습니다.
• load 이벤트 – 외부 리소스가로드되므로 스타일이 적용되고 이미지 크기가 알려집니다.
• beforeunload 이벤트 – 사용자가 떠납니다. 사용자가 변경 사항을 저장했는지 확인하고 정말 나가고 싶은지 물어볼 수 있습니다.
• – 사용자가 거의 떠났지만 통계 전송과 같은 일부 작업을 시작할 수 있습니다.

이러한 이벤트에 대한 세부 정보를 살펴 보겠습니다.

DOMContentLoaded

DOMContentLoaded 이벤트는 document 개체에서 발생합니다.

우리는 잡으려면 addEventListener를 사용해야합니다.

예 :

이 예에서 DOMContentLoaded 핸들러는 문서가로드 될 때 실행되므로 모든 요소를 볼 수 있습니다. 아래 <img>를 포함합니다.

하지만 이미지가로드 될 때까지 기다리지 않습니다. 따라서 alert는 크기가 0으로 표시됩니다.

첫눈에보기에 DOMContentLoaded 이벤트는 매우 간단합니다. DOM 트리가 준비되었습니다. 여기에 이벤트가 있습니다. 하지만 특이한 점은 거의 없습니다.

DOMContentLoaded 및 스크립트

브라우저가 HTML 문서를 처리하고 <script> 태그를 발견하면 DOM 빌드를 계속하기 전에 실행해야합니다. 스크립트가 DOM을 수정하고 document.write를 수정하려고 할 수 있으므로 예방 조치입니다. 따라서 DOMContentLoaded는 기다려야합니다.

따라서 DOMContentLoaded는 이러한 스크립트 다음에 확실히 발생합니다.

위의 예에서 먼저 “Library loaded…”가 표시된 다음 “DOM ready!”가 표시됩니다. (모든 스크립트가 실행됩니다.)

DOMContentLoaded 및 스타일

외부 스타일 시트는 DOM에 영향을주지 않으므로 DOMContentLoaded는이를 기다리지 않습니다.

하지만 함정. 스타일 뒤에 스크립트가있는 경우 해당 스크립트는 스타일 시트가로드 될 때까지 기다려야합니다.

그 이유는 스크립트가 다음과 같이 요소의 좌표 및 기타 스타일 종속 속성을 가져 오기를 원할 수 있기 때문입니다. 위의 예. 당연히 스타일이로드 될 때까지 기다려야합니다.

DOMContentLoaded가 스크립트를 대기하므로 이제 스크립트보다 먼저 스타일을 대기합니다.

내장 된 브라우저 자동 완성

Firefox, Chrome 및 Opera 자동 완성 양식은 DOMContentLoaded입니다.

예를 들어 페이지에 로그인 및 비밀번호로 양식을 작성하고 브라우저가 값을 기억 한 다음 DOMContentLoaded에서 자동 채우기를 시도 할 수 있습니다 (사용자가 승인 한 경우).

그러면 DOMContentLoaded는 긴로드 스크립트에 의해 연기 된 다음 자동 완성도 기다립니다. 일부 사이트 (브라우저 자동 완성을 사용하는 경우)에서 로그인 / 비밀번호 필드가 즉시 자동 완성되지는 않지만 페이지가 완전히로드 될 때까지 지연되는 것을 보셨을 것입니다. 이는 실제로 DOMContentLoaded 이벤트까지의 지연입니다.

window.onload

load window 개체의 이벤트는 스타일, 이미지 및 기타 리소스를 포함하여 전체 페이지가로드 될 때 트리거됩니다. 이 이벤트는 onload 속성을 통해 사용할 수 있습니다.

아래 예는 window.onload가 대기하기 때문에 이미지 크기를 올바르게 표시합니다. 모든 이미지 :

window.onunload

방문자가 페이지를 떠나면 iv id = “aaf4712b82″에서 unload 이벤트가 트리거됩니다. > . 관련 팝업 창을 닫는 것과 같이 지연없이 작업을 수행 할 수 있습니다.

주목할만한 예외는 분석을 보내는 것입니다.

페이지 상태에 대한 데이터를 수집한다고 가정 해 보겠습니다. 사용 : 마우스 클릭, 스크롤, 본 페이지 영역 등.

물론, unload 이벤트는 사용자가 우리를 떠날 때 발생합니다. 서버에 데이터를 저장합니다.

백그라운드에서 데이터를 보냅니다.다른 페이지로의 전환은 지연되지 않습니다. 브라우저는 페이지를 떠나지 만 여전히 sendBeacon를 수행합니다.

사용 방법은 다음과 같습니다.

• 요청은 POST로 전송됩니다.
• Fetch 장에 설명 된대로 문자열뿐만 아니라 양식 및 기타 형식도 전송할 수 있지만 일반적으로 문자열 화 된 객체입니다.
• 데이터는 64kb로 제한됩니다.

sendBeacon 요청이 완료되면 브라우저가 이미 문서에서 나간 것이므로 서버 응답을받을 수있는 방법이 없습니다 (일반적으로 분석을 위해 비어 있음).

또한 이러한 “페이지 왼쪽 이후”요청을 수행하기위한 keepalive 플래그도 있습니다. 일반 네트워크 요청을위한 fetch 메소드에서. Fetch API 장에서 자세한 정보를 찾을 수 있습니다.

다른 페이지로의 전환을 취소하려는 경우 여기에서 할 수 없습니다.하지만 다른 이벤트 – onbeforeunload.

window.onbeforeunload

방문자가 탐색을 시작한 경우 aw 페이지에서 또는 창을 닫으려고하면 beforeunload 핸들러가 추가 확인을 요청합니다.

이벤트를 취소하면 브라우저에서 방문자에게 확실합니다.

이 코드를 실행 한 다음 페이지를 다시로드하여 시도해 볼 수 있습니다.

역사적인 이유로 비어 있지 않은 문자열을 반환하는 것도 취소로 간주됩니다. 이벤트. 얼마 전에 브라우저에서 메시지로 표시했지만 최신 사양에서는 표시하지 않아야합니다.

예 :

동작이 변경되었습니다. , 일부 웹 마스터가 오해의 소지가있는 성가신 메시지를 표시하여이 이벤트 핸들러를 악용했기 때문입니다. 따라서 지금은 이전 브라우저에서 여전히 메시지로 표시 할 수 있지만 그 외에는 사용자에게 표시되는 메시지를 맞춤 설정할 방법이 없습니다.

readyState

설정하면 어떻게 되나요? 문서가로드 된 후 DOMContentLoaded 핸들러?

당연히 실행되지 않습니다.

문서가로드되었는지 확실하지 않은 경우가 있습니다. 문서가 준비되었는지 여부. 현재 또는 나중에 DOM이로드 될 때 함수가 실행되기를 원합니다.

document.readyState 속성은 현재로드 상태를 알려줍니다.

가능한 3 가지 값이 있습니다.

• "loading" – 문서를로드 중입니다.
• "interactive" – 문서를 완전히 읽었습니다.
• "complete" – 문서를 완전히 읽고 모든 리소스 (예 : 이미지)를로드했습니다.

그래서 document.readyState를 확인하고 핸들러를 설정하거나 준비가되면 즉시 코드를 실행할 수 있습니다.

상태가 변경 될 때 트리거되는 readystatechange 이벤트도 있으므로 다음과 같이 모든 상태를 인쇄 할 수 있습니다.

readystatechange 이벤트는 문서 로딩 상태를 추적하는 대체 메커니즘으로 오래 전에 나타났습니다. 요즘에는 거의 사용되지 않습니다.

완전성을 위해 전체 이벤트 흐름을 살펴 보겠습니다.

다음은 <iframe>,

및 이벤트를 기록하는 핸들러 :

실제 예제는 샌드 박스에 있습니다.

일반적인 출력 :

The 대괄호 안의 숫자는 이러한 일이 발생하는 대략적인 시간을 나타냅니다. 같은 숫자로 레이블이 지정된 이벤트는 거의 동시에 발생합니다 (± 몇 밀리 초).

• document.readyState는 interactive DOMContentLoaded 바로 앞에 있습니다. 이 두 가지는 실제로 동일합니다.
• document.readyState는 모든 리소스 (iv id = “9118aff119)가 complete가됩니다. “> 및 img)가로드됩니다. 여기에서 img.onload (img가 마지막 리소스 임) 및 . complete 상태로 전환하는 것은 window.onload와 동일 함을 의미합니다. 차이점은 window.onload는 항상 다른 모든 load 핸들러 다음에 작동한다는 것입니다.

요약

페이지로드 이벤트 :

• DOMContentLoaded 이벤트는 DOM이 다음과 같은 경우 document에서 트리거됩니다. 준비된. 이 단계에서 자바 스크립트를 요소에 적용 할 수 있습니다.
  • <script>https://javascript.info/...</script> 또는 <script src="https://javascript.info/..."></script>와 같은 스크립트는 DOMContentLoaded를 차단하면 브라우저가 대기합니다.
  • 이미지 및 기타 리소스도 계속로드 할 수 있습니다.
• load window의 이벤트는 페이지와 모든 리소스가로드 될 때 트리거됩니다. 일반적으로 오래 기다릴 필요가 없기 때문에 거의 사용하지 않습니다.
• window의 beforeunload 이벤트는 사용자가 페이지를 떠나고 싶을 때 트리거됩니다. 이벤트를 취소하면 브라우저에서 사용자가 정말로 나가기를 원하는지 묻습니다 (예 : 저장되지 않은 변경 사항이 있음).
• iv id = “의 unload 이벤트 aaf4712b82 “> 는 사용자가 마지막으로 떠날 때 트리거됩니다. 핸들러에서 지연이나 사용자에게 요청하지 않는 간단한 작업 만 수행 할 수 있습니다. 그 제한 때문에 거의 사용되지 않습니다. navigator.sendBeacon를 사용하여 네트워크 요청을 보낼 수 있습니다.
• document.readyState는 문서의 현재 상태이며 변경 사항은 readystatechange 이벤트에서 추적됩니다.
  • loading – 문서를로드 중입니다.
  • interactive – 문서가 구문 분석되고 DOMContentLoaded와 거의 동시에 발생하지만 그 전에 발생합니다.
  • complete – 문서와 리소스가로드되고 window.onload와 거의 동시에 발생하지만 그 전에 발생합니다.