브라우저의 DOMContentLoaded와 load 이벤트의 차이는 무엇인가요?

DOMContentLoaded는 DOM 파싱 완료 시점이고, load는 이미지와 폰트 등 모든 리소스 로드 완료 시점입니다. 필요한 작업의 의존 리소스에 따라 선택합니다.

핵심 개념

핵심 기준은 DOM 준비와 전체 리소스 준비입니다.

DOMContentLoaded는 HTML 파싱이 끝나 DOM 트리가 준비된 시점에 발생합니다. 이미지나 iframe이 아직 로드 중이어도 DOM 조회와 이벤트 바인딩은 가능합니다. load는 문서의 하위 리소스까지 모두 완료된 뒤 발생하므로 이미지 크기 계산이나 전체 로드 측정에 적합합니다.

동작 흐름

1. 브라우저의 어느 단계나 API가 관여하는지 확인합니다.
2. 사용자 경험, 보안, 접근성에 미치는 영향을 함께 봅니다.
3. DevTools나 실제 지표로 추측을 검증합니다.
4. 적용 후 캐시, 호환성, 예외 상황을 점검합니다.

실제 예시

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#login')?.addEventListener('click', login);
});
window.addEventListener('load', () => console.log('all resources loaded'));

예시는 핵심 흐름을 단순화한 것입니다. 실무에서는 팀의 배포 방식, 데이터 크기, 장애 영향도, 유지보수 비용까지 함께 고려해야 합니다.

실무에서 주의할 점

• 브라우저 구현 차이와 모바일 환경을 함께 확인해야 합니다.
• 성능 문제는 JavaScript만 보지 말고 네트워크와 렌더링 상태를 같이 봐야 합니다.
• 보안·접근성 기능은 편의성보다 안전한 기본값을 우선해야 합니다.

함께 연결해서 보면 좋은 키워드

Browser, DOMContentLoaded, load, Event

정리

한 줄로 정리하면, DOMContentLoaded는 DOM 파싱 완료 시점이고, load는 이미지와 폰트 등 모든 리소스 로드 완료 시점입니다. 필요한 작업의 의존 리소스에 따라 선택합니다. 개념의 정의뿐 아니라 적용 조건과 실패했을 때의 증상까지 함께 이해하는 것이 중요합니다.