JavaScript async 속성 사용법 | script async와 defer 차이

홈 > 지식 > 프로그래밍 | 개발 지식과 코딩 학습 정보 >

📌 script async 설명

script async는 비동기적으로(JavaScript 파일을 병렬로 다운로드하면서) 실행 되도록 하는 HTML 속성입니다.

1️⃣ 기본 사용법

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

• script.js 파일을 HTML 파싱과 동시에 다운로드 합니다.
• 다운로드가 완료되면 즉시 실행됩니다.
• 하지만 실행 순서는 보장되지 않습니다.

2️⃣ 작동 방식

1. 브라우저가 HTML을 읽으면서 <script async>를 만나면 스크립트를 다운로드하는 동시에 HTML을 계속 파싱 합니다.
2. 다운로드가 끝나는 즉시 HTML 파싱을 잠시 멈추고 스크립트를 실행 합니다.
3. 이후 다시 HTML 파싱을 이어갑니다.

3️⃣ 동기 vs 비동기 vs 지연 실행 (async vs defer)

✅ async는 광고, 분석, 소셜 미디어 위젯 등 독립적인 기능을 실행하는 데 적합

✅ defer는 DOM 조작이 필요한 스크립트(예: jQuery, UI 관련 스크립트)에서 사용하기 좋음

4️⃣ 예제 비교

<!-- 실행 순서: 1 -> 2 (순서 보장됨) -->
<script src="script1.js"></script>
<script src="script2.js"></script>

<!-- 실행 순서 보장되지 않음 (비동기 실행) -->
<script async src="script1.js"></script>
<script async src="script2.js"></script>

<!-- 실행 순서 보장됨 (HTML 파싱 후 실행) -->
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>

🎯 결론

• <script async>는 HTML 파싱과 병렬로 스크립트를 다운로드하고, 다운로드 완료 후 즉시 실행 됩니다.
• 실행 순서가 중요하지 않은 경우(광고, 분석, SNS 위젯 등) async를 사용 하세요.
• DOM 조작이 필요한 스크립트라면 defer가 더 적합 합니다. 🚀