📌 <script async> 설명
<script async>는 비동기적으로(JavaScript 파일을 병렬로 다운로드하면서) 실행되도록 하는 HTML 속성입니다.
1️⃣ 기본 사용법
<script async src="script.js"></script>
script.js파일을 HTML 파싱과 동시에 다운로드합니다.- 다운로드가 완료되면 즉시 실행됩니다.
- 하지만 실행 순서는 보장되지 않습니다.
2️⃣ 작동 방식
- 브라우저가 HTML을 읽으면서
<script async>를 만나면 스크립트를 다운로드하는 동시에 HTML을 계속 파싱합니다. - 다운로드가 끝나는 즉시 HTML 파싱을 잠시 멈추고 스크립트를 실행합니다.
- 이후 다시 HTML 파싱을 이어갑니다.
3️⃣ 동기 vs 비동기 vs 지연 실행 (async vs defer)
| 속성 없음 | async |
defer |
|---|---|---|
| HTML 파싱 중 다운로드 후 실행 | HTML과 병렬 다운로드 후 즉시 실행 | HTML과 병렬 다운로드 후, HTML 파싱이 끝난 후 실행 |
| 실행 순서 보장됨 | 실행 순서 보장 안 됨 | 실행 순서 보장됨 |
| 크리티컬 스크립트 (필수 기능) 사용 | 독립적인 기능 (광고, 분석 등) | DOM 조작하는 스크립트 사용 |
✅ 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가 더 적합합니다. 🚀