script 태그에서 async와 defer의 차이점

<script> 태그의 async와 defer 속성은 스크립트를 비동기적으로 로드하여 페이지 로딩 속도를 향상시키는 데 사용된다.
하지만 두 속성은 실행 시점에서 중요한 차이를 가집니다.

---

async 속성

async는 스크립트를 비동기적으로 다운로드하며, 다운로드가 완료되는 즉시 실행된다.

<script src="example.js" async></script>

✅ 특징

• 스크립트가 HTML 파싱과 병렬로 다운로드됨
• 다운로드가 완료되면 즉시 실행되므로, HTML 파싱이 잠시 중단됨
• 여러 개의 async 스크립트가 있을 경우, 다운로드가 완료된 순서대로 실행

⚠️ 주의

• 실행 순서를 보장하지 않기 때문에, 의존성이 없는 독립적인 스크립트에 적합 예: Google Analytics, 광고 스크립트 등

---

defer 속성

defer는 스크립트를 비동기적으로 다운로드하지만, HTML 문서 파싱이 끝난 후에 실행됩니다.

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

ex. 메인 애플리케이션 로직, 의존 관계가 있는 스크립트 등에 적합

✅ 특징

• 스크립트가 HTML 파싱과 병렬로 다운로드됨
• 실행은 HTML 파싱 완료 후 (DOMContentLoaded 직전)
• 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행

---

async vs defer 비교

구분	async	defer
다운로드 시점	HTML 파싱과 병렬	HTML 파싱과 병렬
실행 시점	다운로드 완료 즉시	HTML 파싱 완료 후
실행 순서 보장	❌ 불가능	✅ 작성 순서대로
HTML 파싱 중단 여부	⛔ 중단됨	✅ 중단되지 않음
사용 예시	광고, 통계, 외부 위젯	메인 스크립트, 의존성 있는 코드

---

정리

• async: 독립적이고 빠르게 실행해야 하는 스크립트에 사용
• defer: 실행 순서가 중요하거나 HTML 파싱 이후 실행해야 하는 스크립트에 사용

---

END