DOMContentLoaded vs. Load 이벤트

DOMContentLoaded vs. Load 이벤트

 

글. 수알치 오상문

 

DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생한다.

필요한 자원을 다 받고 브라우저에 렌더링(화면 출력)까지 다 끝나면 Load 이벤트가 발생한다.

 

(1) (웹 브라우저) 페이지 요청

(2) (웹 서버) 응답 

(3) (웹 브라우저) DOM tree 구조 분석 --> DOMContentLoaded 이벤트 발생 

(4) (웹 브라우저) 필요한 자원 다운로드 --> 화면 출력 --> Load 이벤트 발생 

 

자바스크립트에서 DOM에 접근하려면, DOM 구조 분석이 이루어진 후에 처리해야 한다.  

DOM tree가 만들어진 후에야 DOM API를 통해서 DOM에 접근할 수 있기 때문이다.

그러므로 자바스크립트 코드는 DOMContentLoaded 이후에 동작하도록 구현한다.

 

[예제 코드] 

document.addEventListener("DOMContentLoaded", function() {
  startSomething();
  initSomthing(); 
  var el = document.querySelector("div");
  console.log(el);
});