window.onload vs DOMContentLoaded

뭔가요

두 방법 모두 페이지가 로드된 후에 JavaScript 코드를 실행하는 데 사용된다.
기본적으로 아래와 같은 형태를 띈다.

window.onload = hamsoo;
document.addEventListener('DOMContentLoaded', hamsoo);

차이점

1. 이벤트 발생 시점

• window.onload: 페이지의 모든 리소스(이미지, 스타일시트, 서브프레임 등)를 포함한 전체 페이지가 로드된 후에 실행. 즉, 페이지에 포함된 모든 요소가 완전히 로드되었을 때 호출된다.
• DOMContentLoaded: DOM이 완전히 로드된 후(즉, 문서 구조가 완전히 파싱된 후) 이미지나 스타일시트와 같은 다른 리소스의 로딩이 완료되기 전에 실행. 문서가 준비된 직후, 더 빠른 시점에 발생한다.

2. 중복 이벤트 등록

• window.onload: 하나의 함수만 등록 가능. 여러 개를 등록하려고 하면, 마지막에 등록된 핸들러만 실행된다.
• addEventListener: 함수 여러 개 등록 가능.

3. 사용 시기

• window.onload: 모든 리소스가 로드된 후에 실행해야 하는 코드(모든 이미지가 로드된 후에 이미지를 다루는 작업 등)에서 유용하다.
• DOMContentLoaded: DOM 요소에 대한 접근만 필요하고, 추가적인 리소스 로딩을 기다릴 필요가 없을 때 더 적합하다. 중복 이벤트 등록 가능의 측면에서 window.onload 보다 훨씬 많이 사용된다.

Summary

window.onload는 페이지의 모든 리소스가 완전히 로드된 후에 실행되는 반면,
DOMContentLoaded는 DOM이 완전히 로드된 후, 다른 리소스의 로딩을 기다리지 않고 실행됩니다.
성능 면에서 일반적으로 DOMContentLoaded가 더 빠르며, 복수의 이벤트 핸들러를 추가할 수 있다는 점에서 유연성이 높습니다.