DOMContentLoaded 이벤트

DOMContentLoaded 와 Load 차이

• DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트 발생
• 모든 자원이 다 받아져서 브라우저에 화면 표시까지 다 끝나는 시점에 Load 발생
• DOMContecLoaded 이후에 동작하도록 구현하는 것이 성능에 유리하다.

DOMContentLoaded 이벤트를 사용하는 이유

<!-- DOM Tree가 다 만들어진 후 자바스크립트 실행-->
<div>a</div>

<script>
  let div = document.querySelector("div");
  console.log(div);    //<div>a</div> 출력
</script>

<!-- DOM Tree가 다 만들어지기 전 자바스크립트 실행 -->
<script>
  let div = document.querySelector("div");
  console.log(div);    //null 출력
</script>

<div>a</div>

위와 같은 이유 때문에 script문을 body 태그를 닫기 전에 삽입한다.

DOMContentLoaded 이벤트 이후에 동작하도록 구현

function init(){
  ...
}

document.addEventListener("DOMContentLoaded", () => {
  let div = document.querySelector("div");
  init();
});

참조

https://www.boostcourse.org/web316/lecture/20141/
https://developer.mozilla.org/ko/docs/Web/Events/DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event