[TIL] JavaScript - 로딩되는 시점 이벤트 제어 (DOMContentLoaded, load, beforeunload/unload)

HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다고 합니다.

 

DOMContentLoaded 란?

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용할 수 있습니다.

 

load 란?

HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있습니다.

 

beforeunload/unload 란?

사용자가 페이지를 떠날 때 발생합니다.
- beforeunload : 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때 사용됩니다.
- unload : 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때 사용됩니다.

 

코드

// only document
window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOMContentLoaded");
});

// after resources (css, images)
window.addEventListener("load", (event) => {
    console.log("load");
});

// before unload
window.addEventListener("beforeunload", (event) => {
    console.log("beforeunload");
});

// resource is being unloaded
window.addEventListener("unload", (event) => {
    console.log("unload");
});

 

마치며...

이번 프로젝트를 하면서 DOM이 완성됐을 때 실행되는 함수가 간절했는데 역시 존재하고 있었습니다...

이렇게 하나 또 배워갑니다...

 

Reference

• https://ko.javascript.info/onload-ondomcontentloaded