script 태그의 async, defer와 type="module"은 로딩 및 실행 시점이 어떻게 다른가요?

이렇게 답해 보세요 (핵심 답변)

외부 classic script에서 async와 defer는 둘 다 HTML 파싱을 멈추지 않고 병렬로 다운로드하지만 실행 시점이 다릅니다. async는 다운로드가 끝나는 즉시 파싱을 멈추고 실행되어 문서 순서를 보장하지 않는 반면, defer는 파싱이 끝난 뒤 DOMContentLoaded 전에 문서 순서대로 실행됩니다. type="module" 스크립트는 기본적으로 defer처럼 지연 실행되며 의존 그래프를 함께 불러오고, 여기에 async를 주면 준비되는 즉시 실행됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 독립적으로 동작하는 방문자 분석 스크립트는 async가 어울리고, DOM 요소에 접근하거나 실행 순서가 중요한 일반 스크립트는 defer나 module이 안전합니다.
2. 다운로드를 비동기로 받더라도 스크립트 코드가 실행되는 순간에는 메인 스레드를 사용하므로, 실행 시간이 길면 화면 반응이 느려질 수 있습니다.

면접에서 자주 하는 실수

src 속성이 없는 인라인(inline) classic script에 defer를 붙여도 외부 스크립트처럼 실행이 뒤로 미뤄진다고 기대하면 안 됩니다.