문서의 로딩되는 시점 이벤트 제어하기

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

 

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

• DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.
• load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
• beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다.

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 프로퍼티 사용하면 된다.

프로퍼티의 값

• "loading" : 문서를 불러오는 중일 때
• "interactive" : 문서가 완전히 불러와졌을 때
• "complete" : 문서를 비롯한 이미지 등의 리소스들도 모두 불러와졌을 때

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

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

 

 

스크립트를 하단에 작성하는 이유는 무엇인가?

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

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

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

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

 

 

 

참고

DOMContentLoaded, load, beforeunload, unload 이벤트

 

Window: DOMContentLoaded 이벤트 - Web API | MDN

 

Window: beforeunload 이벤트 - Web API | MDN