DOMContentLoaded 이벤트

로딩이 다 된 후 자바스크립트 동작이 이뤄지는 것이 일반적이다.

DOM 로딩이 다 되지 않았는데 DOM을 조작하는 자바스크립트 코드가 실행되면 원하는 결과를 내지 못할 것이다.

 

DOMContentLoaded 이벤트로 이런 불상사를 막을 수 있다.

 

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

(load는 DOM Tree 외의 모든 자원이 다 받아져서 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에 발생한다.)

 

DOM Tree가 다 만들어진 후에 DOM API를 이용하여 DOM에 접근할 수 있기 때문에, 보통 자바스크립트 코드는 DOMContentLoaded 이후에 동작하도록 구현한다. 이 방법이 로딩 속도 성능에 유리하다고 생각하기 때문이다.

 

document.addEventListener("DOMContentLoaded", function() {
	startSomething();
	initFoo();
	initBar();
	var el = document.querySelector("div");
});

 

load는 이미지 같은 DOM Tree 외의 자원에 대한 정보가 필요할 때 사용하기 적절할 것 같다.

 

 

 

 

※참고 :

JavaScript 내용이 간단하면 한 페이지에 모두 표현하고, 그렇지 않다면 의미에 맞게 구분한다.

CSS는 head 태그 안에, JavaScript는 body 태그 닫히기 전에 소스파일 간 의존성에 따라 순서대로 배치하면 좋다.

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- 서비스 개발을 위한 디렉토리 구성

- DOMContentLoaded 이벤트