defer와 async의 차이

<script> 태그에서 외부 JavaScript 파일을 불러올 때 로딩 방식을 제어하는 속성

✅ 1. defer란?

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

📌 동작 방식
HTML 파싱이 끝난 뒤 (DOMContentLoaded 직전) 스크립트를 실행

여러 개의 defer 스크립트는 순서대로 실행됨

✅ 장점
DOM이 준비된 상태에서 실행 → DOM 조작에 안전

스크립트 간 실행 순서 보장

페이지 렌더링 지연 없음

❌ 단점
반드시 external script만 가능 (inline script는 defer 못 씀)

🟢 사용 시점
DOM이 먼저 구성된 후에 실행되어야 하는 스크립트

여러 개의 스크립트를 순서대로 실행해야 할 때

✅ 2. async란?

📌 동작 방식
다운로드가 완료되는 즉시 실행
→ HTML 파싱 중단 가능

✅ 장점
가장 빠르게 실행됨 → 성능 최적화 가능

렌더링 블로킹 없이 실행됨

❌ 단점
DOM 준비 전에 실행될 수 있음 → DOM 조작 시 에러 가능

여러 async 스크립트는 실행 순서 보장 안 됨

💡 실무 팁
일반 웹 앱/사이트: defer 기본 사용

외부 SDK, 광고, 트래킹: async 사용

<script>를 body 맨 아래 두는 방식보다 defer가 더 안정적이고 관리 편함