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

2025-04-04 TIL-script 태그에서 async와 defer의 차이점

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

<script> 태그에서 async와 defer는 자바스크립트 파일을 비동기적으로 로드한다는 공통점이 있다.

하지만, 실행 시점에서 중요한 차이가 있다.

async

1. 스크립트를 비동기적으로 다운로드 한다.

2. 다운로드가 완료되면 즉시 실행된다.

3. HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단된다.

4. 여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행된다.

async 실행 흐름

HTML 파싱 ──▶ 스크립트 다운로드 (병렬)
            └─▶ 다운로드 끝나면 → DOM 파싱 멈추고 → 스크립트 실행

defer

1. 스크립트를 비동기적으로 다운로드 한다.

2. HTML 문서 파싱이 완전히 끝난 후에 실행된다.

3. DOMContentLoaded 이벤트 발생 직전에 실행된다.

4. 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행된다.

defer 실행 흐름

HTML 파싱 ──▶ 스크립트 다운로드 (병렬)
              ▶ DOM 파싱 완료 후 → 작성된 순서대로 실행

async와 defer 비교 테이블

속성	다운로드 방식	실행 시점	실행 순서 보장	사용 예시
async	비동기 (병렬)	다운로드 즉시 실행	❌ 실행 순서 불규칙	광고, 분석 도구 (예: Google Analytics)
defer	비동기 (병렬)	DOM 파싱 완료 후 실행	✅ HTML 작성 순서 유지	페이지 로직, 메인 스크립트

async와 defer 선택 기준

페이지 로딩 최적화 측면

• 중요한 페이지 로직 -> defer

• 독립적인 외부 스크립트 -> async

성능 측면

• defer는 HTML 파싱을 막지 않고 실행 순서도 보장되므로 대부분의 경우 추천

• async는 실행 순서가 중요하지 않은 경우에만 사용