script의 async와 defer 차이를 설명해 주세요

scriptparserexecution-order

script의 async와 defer 차이를 설명해 주세요

예상 시간: 6분

30초 답변

일반 script는 HTML parser를 막을 수 있습니다. async와 defer는 script 다운로드를 parsing과 병렬로 진행하게 해 렌더링 지연을 줄이는 속성입니다. async는 다운로드가 끝나는 즉시 실행되기 때문에 실행 순서가 보장되지 않습니다. 독립적인 analytics script처럼 다른 script나 DOM 순서에 의존하지 않는 경우에 어울립니다.

defer는 다운로드는 병렬로 하되 HTML parsing이 끝난 뒤 문서에 나온 순서대로 실행됩니다. DOM을 사용하거나 여러 script의 실행 순서가 중요하면 보통 defer가 더 안전합니다.

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

일반 script는 왜 parsing을 막을 수 있나요?

부가 설명

<script src="a.js"></script>
<script async src="analytics.js"></script>
<script defer src="app.js"></script>

일반 script는 parser를 멈추고 다운로드/실행될 수 있습니다. async는 빨리 받은 script가 먼저 실행될 수 있습니다. defer는 DOM parsing이 끝난 뒤 실행되고, 여러 개라면 문서 순서를 지키는 편입니다.

둘 다 “비동기 다운로드”라는 점만 기억하면 실행 타이밍을 놓치기 쉽습니다. 실제 차이는 실행이 parser를 언제 막는지, 그리고 실행 순서를 보장하는지입니다.

async는 독립 script에, defer는 DOM에 의존하거나 실행 순서가 필요한 app bootstrap script에 자주 어울립니다.

한 줄 정리

async는 준비되면 바로 실행되고 순서가 흔들릴 수 있으며, defer는 parsing 후 문서 순서대로 실행됩니다.