DOMContentLoaded, load, beforeunload, unload

DOMContentLoaded, load, beforeunload, unload

HTML 문서의 생명주기 이벤트

HTML 문서의 생명주기 이벤트

• DOMContentLoaded

  DOM 구성 완료 시 document 객체에서 실행됨

  스크립트는 실행되는 것을 막고 브라우저는 스크립트가 실행되길 기다린 후 실행시킴

  이미지 같은 기타 리소스들은 여전히 로드 중일 수 있음

• load

  페이지를 비롯한 자원 전부가 모두 불러와졌을때 window 객체에서 실행됨

  잘 사용되지 않음

• beforeunload

  사용자가 페이지를 떠나려 할 때 window 객체에서 실행됨

  취소하려 할 때 사용자에게 메세지 띄워서 페이지 떠날 건지 물어봄

• unload

  사용자가 최종적으로 사이트 떠날 때 window 객체에서 발생

  복잡한 작업이나 사용자와 상호작용 할 수 없음

  navigator.sendBeacon 사용해 네트워크 요청 보낼 수 있음

• document.readyState

  문서의 현재 상태 나타냄

  • readystateChange

    변화 추적할 수 있음

    loading : 문서를 불러오는 중일 때

    interactive : 문서가 완전히 불러와졌을 때 DOMContentLoaded 가 실행되기 바로 직전에 해당 값으로 변경됨

    complete : 페이지를 비롯한 리소스들이 모두 불러와졌을 때 window.onload 가 실행되기 바로 직전에 해당 값으로 변경됨