'DOMContentLoaded' vs 'window.onload' 차이점은 무엇일까?

오랜만에 티스토리 코드를 보수하다가 페이지 로드 이벤트에 대해 알아보게 되었다. 작동 방식이 잘 구분되지 않아 헷갈렸던 부분이 DOMContentLoaded와 window.onload였는데, 이번 기회에 정리해보려고 한다.

핵심 정리

1. DOMContentLoaded는 HTML 문서가 모두 로드되었을 때 실행되며, CSS나 이미지 로딩이 끝나지 않아도 실행할 수 있다.
2. window.onload는 HTML뿐만 아니라 이미지, CSS, 폰트 파일 등 모든 리소스가 완전히 로드된 후 실행된다.
3. 빠른 실행이 필요하면 DOMContentLoaded를, 모든 요소가 준비된 후 실행하려면 window.onload를 사용한다.

DOMContentLoaded: HTML이 준비되면 실행

DOMContentLoaded 이벤트는 HTML 문서가 모두 파싱되었을 때 실행된다. 즉, DOM 트리가 완성되면 실행되므로 이미지나 CSS 파일이 아직 로드되지 않았더라도 코드가 실행될 수 있다.

document.addEventListener("DOMContentLoaded", function () {
    console.log("HTML 문서가 모두 로드됨");
});

위의 코드는 아래의 코드는 HTML이 완전히 로드되면 실행된다. 이미지, CSS 등의 추가 리소스가 아직 로드되지 않아도 실행 가능하다는 특징이 있다.

 

결론적으로, DOMContentLoaded는 HTML 요소를 조작하거나, 빠른 자바스크립트 로드가 필요할 때 사용할 수 있다.

HTML 문서 안에는 태그로 CSS 파일이 포함될 수도 있고, 이미지가 삽입될 수도 있다. 하지만 DOMContentLoaded 이벤트는 이런 추가 리소스가 로드되었는지 여부와 상관없이 실행된다.

window.onload: 모든 리소스가 준비되면 실행

window.onload 이벤트는 HTML뿐만 아니라 이미지, CSS, 폰트 파일 등 모든 리소스가 로드된 후 실행된다. 아래의 코드는 HTML, 이미지, CSS 등이 모두 로드된 후 실행된다.

window.onload = function () {
    console.log("모든 리소스가 로드됨");
};

window.onload는 HTML뿐만 아니라 모든 리소스가 로드된 후 실행된다. 따라서, 실행 속도가 상대적으로 느리다. window.onload는 동적으로 이미지 크기를 조정하거나, CSS가 적용된 후 요소의 크기를 가져올 때 등에 사용할 수 있다.

무엇을 선택해야 할까? DOMContentLoaded vs. window.onload

이벤트	실행 시점	실행 속도	용도
DOMContentLoaded	HTML이 완전히 로드된 후	빠름	HTML 요소 조작
window.onload	모든 리소스가 로드된 후	느림	이미지, CSS 적용 후 작업

빠르게 실행해야 하는 경우 DOMContentLoaded를, 모든 요소가 준비된 후 실행해야 하는 경우 window.onload를 선택하면 된다.