DOMContentLoded와 onload의 차이점을 알아보자

 

DOMContentLodad와 onload의 공통점은 모두 웹 페이지에서 이벤트를 처리할 때 사용되는 이벤트이다.

페이지 로딩 상태를 감지하여 특정 작업을 실행할 수 있도록 해주지만, 언제 그 작업이 실행되는지 차이가 있다.

 

1.DOMContentLoaded 이벤트

위 이벤트는 문서의 구조 즉, DOM이 완전히 로드되고 분석되었을 때 발생한다. 

이 시점에서는 스타일시트와 이미지 같은 외부 리소스가 모두 로드되지는 않았어도 스크립트는 DOM 요소에 접근할 수 있다. 주로 문서의 구조가 준비 되자마자 실행되어야 하는 스크립트를 실행할 때 사용된다.

페이지가 완전히 로드되게 전이라고 해도 DOM에 접근할 수 있기 때문에 인터페이스를 초기화 할 수 있다.

document.addEventListner("DOMContentLoaded", function(){
	console.log("DOMContentLoaded");
    const header = document.querySelector("h1");
    header.style.color="red";
})

//위 코드는 html 문서의 DOM이 완전히 로드된 후에 실행된다. DOM요소에 접근하여 스타일을 변경 할 수 있다.

 

2.onload 이벤트

위 이벤트는 페이지의 모든 리소스가 모두 로드된 후 발생한다. 여기서 말하는 리소스는 이미지, 스타일시트, 스크립트 등을 얘기한다. 이 이벤트는 모든 외부 리소스까지 모두 준비된 후에 실행되어야 하는 작업을 할 때 유리하다.

 

예를들어 모든 이미지가 로드 된 후에 슬라이드 쇼를 시작하는 스크립트나 페이지가 완전히 준비된 후에 실행되는 애니메이션 등을 사용할 때 주로 쓰인다.

window.onload = function(){
	console.log("onload test");
    const img = document.quertSelector('img');
    img.style.border="2px solid red";
}

//이 코드는 모든 리소스가 완전히 로드 된 다음에 실행되며, 이미지 요소에 테두리를 추가하는 작업을 수행한다.

 

 

3.차이점 요약

- DOMContentLoaded 

완전히 로드되고 분석되면 발생한다. 외부 리소스들는 로드되지 않았을 수도 있다.

 

-onload

페이지의 모든 리소스가 모두 로드된 후에 발생한다.

 

4.결론

-DOMContentLoaded 

DOM 조작이 필요할 때 즉 페이지의 구조가 준비되면 바로 실행해야 할 때 사용한다.

ex) 폼 초기화, 메뉴 드롭다운 초기화, 페이지 인터렉션 등 

 

-onload

모든 리소스가 준비된 후에 실행해야할 작업이 있을때 사용한다.

ex) 이미지 슬라이드 쇼, 전체 페이지 로딩 애니메이션, 데이터 시각화(외부 리소스를 포함한 그래프나 차트 같은 복잡한 데이터를 시각화 요소로 렌더링 하는 작업 등)