DOMContentLoaded

DOM 객체가 완성되고 나면 실행되는 이벤트를 의미한다. 브라우저가 script를 만나게 되면 DOM 객체 생성을 중단 그리고 script 실행을 끝마친 후에 다시 제작을 연계하기 시작한다.

브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.

DOMContentLoaded를 막지 않는 스크립트

위와 같은 규칙엔 두 가지 예외사항이 있다.

1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않습니다. async 속성에 대해선 곧 학습할 예정이다.
2. document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않는다.

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

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

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

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

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