페이지 진입 시 특정 이벤트가 발생하길 원하는 경우가 있어 정리 해보았다.

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

DOMContentLoaded 이벤트

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

⭐ 스타일시트를 불러오는 태그 바로 다음에 스크립트가 위치하면 이 스크립트는 스타일시트가 로드되기 전까지 실행되지 않는다.

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // 이 스크립트는 위 스타일시트가 로드될 때까지 실행되지 않는다.
  alert(getComputedStyle(document.body).marginTop);
</script>

load 이벤트

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

// 이미지 크기를 가져온다.
window.onload = function () {
   console.log(document.getElementById("bg").clientWidth);
}

beforeunload/unload 이벤트

beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때

unload – 사용자가 진짜 떠나기 전에 사용자 분석정보를 담은 통계자료를 전송하고자 할 때

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

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

// beforeunload 추가 확인 요청
window.addEventListener("beforeunload", (event) => {
	 event.preventDefault();
	
		// 크롬에서는 returnValue 설정 필요
   event.returnValue = "";
});

readyState 이벤트

문서가 로드되었는지 아닌지를 판단할 수 없는 경우

이럴 때 현재 로딩 상태를 알려주는 document.readyState 프로퍼티 사용하면 된다.

프로퍼티의 값

function work() { /*...*/ }

if (document.readyState == 'loading') {
  // 아직 로딩 중이므로 이벤트를 기다린다.
  document.addEventListener('DOMContentLoaded', work);
} else {
  // DOM이 완성되었습니다!
  work();
}

대부분 스크립트를 </body> 위에 작성하거나, 하단에 작성하는 경우가 많다.

HTML 문서를 파싱하는 과정에서 script 태그를 만난다면, DOM 구축 작업이 중단된다.중단된 후, script 작업을 실행된 후에 다시 작업이 재 실행되는 것이다.

또한 상황에 따라, DOM 구축이 되지 않은 상태에서 DOM 을 가져오기 때문에, 정상적인 동작이 이루어지지 않는다.

그래서 </body> 위에 작성하거나, 하단에 작성해야 HTML 문서의 구조가 먼저 로드되고 브라우저가 렌더링을 시작할 수 있으며, 그 후에 스크립트가 실행되기 때문에 사용자 경험이 향상될 수 있다.

참고

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

https://developer.mozilla.org/ko/docs/Web/API/Document/DOMContentLoaded_event

https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event