DOMContentLoaded, load, beforeunload, unload 이벤트

HTML 문서 생명주기의 3가지 주요 이벤트

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

세가지 이벤트는 다음과 같은 상황에서 활용할 수 있다.

• DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때
• load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음
• beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때
• unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

⚠️ DOMContentLoaded를 막지 않는 스크립트

• DOMContentLoaded를 막지 않는 두 가지 예외사항
  1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않는다.
  2. document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않는다.

DOMContentLoaded와 styles

외부 스타일시트는 DOM에 영향을 주지 않기 때문에 DOMContentLoaded는 외부 스타일시트가 로드되기를 기다리지 않는다.

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

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

이런 예외는 스크립트에서 스타일에 영향을 받는 요소의 프로퍼티를 사용할 가능성이 있기 때문에 만들어졌다. 위 예시에선 스타일이 로드되고, 적용되고 난 다음에야 좌표 정보가 확정되기 때문에 자연스레 이런 제약이 생겼다고한다.

DOMContentLoaded는 스크립트가 로드되길 기다린다. 위의 경우라면 당연히 스타일시트 역시 기다리게 된다.

Reference

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