DOMContentLoaded와 onload의 차이

DOMContentLoaded와 onload의 차이

DOMContentLoaded와 window.onload의 차이는 주로 이벤트 발생 시점과 사용 사례에 따라 나뉨.

---

차이점 요약

특징	DOMContentLoaded	window.onload
발생 시점	DOM 트리가 완전히 로드되고 파싱된 직후 발생 (스타일시트, 이미지 등 외부 리소스는 로드되지 않아도 됨)	페이지의 모든 리소스(이미지, 스타일시트, 서브프레임 등)가 완전히 로드된 후 발생
속도	더 빠르게 실행됨	DOMContentLoaded보다 느리게 실행됨
사용 사례	DOM 조작이나 초기화 작업이 필요할 때 사용	외부 리소스가 모두 로드된 후 작업이 필요할 때 사용
코드 예시	document.addEventListener('DOMContentLoaded', () => { ... });``````window.onload = () => { ... };
브라우저 지원 및 제한	대부분의 브라우저에서 지원	브라우저마다 약간의 차이가 있지만 거의 모든 환경에서 지원

---

세부 설명

1. DOMContentLoaded

• 이 이벤트는 브라우저가 HTML 문서를 완전히 로드하고 DOM 트리를 생성한 직후 발생
• 스타일시트, 이미지, 서브프레임과 같은 외부 리소스는 로드되지 않아도 이벤트가 발생
• 주요 사용 사례:
  • DOM 요소를 조작하거나 초기화 작업을 수행해야 할 때.
  • 외부 리소스 로드 여부와 상관없이 빠르게 동작해야 하는 스크립트를 실행할 때.
• 예시:

  document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM is fully loaded and parsed');
    // DOM 조작 코드
  });

2. window.onload

• 이 이벤트는 페이지의 모든 리소스(이미지, 스타일시트, 서브프레임 등)가 완전히 로드된 후에 발생
• DOMContentLoaded보다 느리게 실행되며, 모든 외부 자원이 필요할 때 유용합니다.
• 주요 사용 사례:
  • 이미지 크기 계산이나 레이아웃 관련 작업처럼 외부 리소스가 모두 준비된 후에 실행해야 할 작업.
  • 페이지의 모든 콘텐츠가 로드된 상태에서 특정 작업을 수행해야 할 때.
• 예시:

  window.onload = () => {
    console.log('Page is fully loaded');
    // 외부 리소스를 포함한 작업
  };

---

적합한 사용 시점

언제 DOMContentLoaded를 사용할까?

• DOM 요소를 즉시 조작하거나 초기화해야 하는 경우.
• 외부 리소스(이미지, CSS 등)가 필요하지 않은 작업.

언제 window.onload를 사용할까?

• 이미지나 스타일시트와 같은 외부 리소스가 모두 준비된 후에 작업해야 하는 경우.
• 예를 들어, 이미지 슬라이더나 레이아웃 계산 작업.

---

결론

대부분의 경우에는 DOMContentLoaded를 사용하는 것이 더 적합함. 이는 DOM이 준비되는 즉시 JavaScript를 실행할 수 있어 사용자 경험을 개선하고 페이지 로드를 빠르게 느끼게 하기 때문임. 그러나 모든 외부 리소스를 기다려야 하는 특정 상황에서는 window.onload를 사용하는 것이 적합함.