[Javascript] 페이지 로딩 후 스크립트 실행(defer, DOMContentloade, onload)

onload vs defer vs DOMContentLoaded 비교

JavaScript에서 페이지 로딩 후 실행할 코드를 관리하는 방법에는 onload, defer, DOMContentLoaded 등이 있다.
각각의 방식이 실행되는 타이밍과 차이점을 이해하면 최적의 방식을 선택할 수 있다.

1. onload 이벤트

동작 방식

• 페이지의 모든 리소스(HTML, CSS, 이미지, 스크립트 등)가 완전히 로드된 후 실행됨.
• 즉, 이미지, 스타일시트, 폰트 등 모든 리소스가 다운로드된 후 실행됨.

예제

window.onload = function () {
  console.log("모든 리소스 로딩 완료 후 실행!");
};

실행 타이밍

HTML + CSS + 이미지 + 스크립트 등 모든 리소스가 완전히 로드된 후 실행
이미지나 스타일시트 로딩이 느릴 경우, 실행이 지연될 수 있음.

언제 사용해야 할까?

✔ 모든 리소스(이미지 포함)가 로드된 후 실행해야 하는 경우
✔ 이미지 크기를 계산하거나, CSS가 적용된 후 레이아웃을 조작해야 하는 경우

2. defer 속성 (스크립트 태그에서 사용)

동작 방식

• HTML을 모두 파싱한 후 실행되지만, 외부 리소스(이미지 등)를 기다리지 않음.
• 스크립트가 병렬로 다운로드되며, HTML 파싱이 끝난 후 실행됨.
• HTML 문서가 로드된 순서대로 실행됨.

예제

<script src="script.js" defer></script>

실행 타이밍

HTML 파싱 완료 후 실행 (이미지, CSS 로딩과 무관)
스크립트가 병렬 다운로드되므로 성능이 좋음
스크립트가 여러 개 있을 경우, HTML 문서에서 선언된 순서대로 실행됨.

언제 사용해야 할까?

✔ HTML 문서가 완전히 로드된 후 실행해야 하지만, 외부 리소스를 기다릴 필요가 없는 경우
✔ 여러 개의 스크립트가 있고 실행 순서가 중요할 때 (<script> 태그 순서대로 실행됨)
✔ 비동기 로딩을 지원하면서 DOMContentLoaded 이벤트 이후 실행되도록 하고 싶을 때

3. DOMContentLoaded 이벤트

동작 방식

• HTML이 모두 파싱된 후 실행됨 (CSS, 이미지 등 외부 리소스는 기다리지 않음).
• 즉, HTML 요소만 로드된 상태에서 실행 가능.
• defer와 유사하지만, 스크립트를 defer 없이도 실행할 수 있음.

예제

document.addEventListener("DOMContentLoaded", function () {
  console.log("HTML 파싱 완료 후 실행!");
});

실행 타이밍

HTML 파싱이 끝난 후 즉시 실행 (이미지, CSS 등 외부 리소스 로딩과 무관)
defer와 다르게 스크립트 로딩이 끝날 때까지 기다리지 않음.

언제 사용해야 할까?

✔ JavaScript가 DOM 요소를 조작해야 하는 경우 (document.getElementById() 등)
✔ HTML이 로드된 직후 실행해야 하지만, 외부 리소스를 기다릴 필요가 없는 경우
✔ 기존 <script> 태그에 defer 속성을 추가할 수 없는 경우

실행 순서 비교

이벤트	실행 시점	외부 리소스 로딩 여부	실행 순서
onload	모든 리소스(HTML, CSS, 이미지, 스크립트 등)가 로드된 후	기다림	가장 마지막
defer	HTML이 모두 파싱된 후 실행	❌ 기다리지 않음	<script> 태그의 순서대로 실행
DOMContentLoaded	HTML이 파싱된 직후 실행	❌ 기다리지 않음	defer보다 빠를 수도 있음

어떤 것을 사용해야 할까?

상황	추천 방법
모든 리소스(이미지 포함)가 로드된 후 실행해야 할 때	window.onload
HTML이 모두 로드된 후 실행해야 하지만, 외부 리소스를 기다릴 필요가 없을 때	DOMContentLoaded
HTML을 모두 파싱한 후 실행하고, <script> 태그의 순서를 유지하고 싶을 때	defer

결론

가장 최적의 방법은 defer 속성을 사용하는 것(스크립트 순서가 상관없을때는 async속성 사용가능)

• 최신 브라우저에서는 <script defer>를 사용하면 HTML 파싱이 끝난 후 자동으로 실행되므로,
  DOMContentLoaded를 사용할 필요가 없음.

하지만 기존 코드에서 defer를 추가할 수 없다면 DOMContentLoaded를 사용하면 된다.
이미지, 스타일시트까지 포함하여 모든 리소스가 로드된 후 실행해야 한다면 onload 사용.