async과 defer 두 속성 모두 스크립트를 비동기로 로드합니다.
async
스크립트를 비동기적으로 다운로드합니다.
다운로드가 완료되면 즉시 실행됩니다.
HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.
여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.
defer
스크립트를 비동기적으로 다운로드합니다.
HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.
DOMContentLoaded 이벤트 발생 직전에 실행됩니다.
여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행됩니다.
따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 스크립트의 경우 defer를 사용하고, 독립적으로 실행되는 스크립트(ex. Google Analytics)의 경우 async를 사용하는 것이 적절합니다.
정리
async와 defer는 <script> 태그에서 스크립트를 비동기적으로 로드하는 속성입니다.
-
async
스크립트를 비동기적으로 다운로드하고, 완료 즉시 실행합니다. HTML 파싱은 실행 중 잠시 중단되며, 여러 스크립트는 다운로드 순으로 실행됩니다. 독립적인 스크립트(예: Google Analytics)에 적합합니다. -
defer
스크립트를 비동기적으로 다운로드하고, HTML 파싱 완료 후 DOMContentLoaded 직전에 실행합니다. 스크립트는 HTML 작성 순서대로 실행됩니다. 실행 순서가 중요한 메인 로직에 적합합니다.
async나 defer를 사용하지 않고
<script>를<body>끝에 넣는 방식과 다른가요?
<body>끝에<script>를 넣으면 스크립트가 순차적으로 로드되어 HTML 파싱이 완료된 상태에서 실행됩니다. 따라서, 리소스 로드가 비동기적이지 않아 초기 렌더링이 지연될 수 있습니다.
하지만 async와 defer는 스크립트를 비동기적으로 로드해 파싱과 병렬 처리하므로 페이지 로드 시간을 단축할 수 있습니다.
defer는<body>끝과 유사한 실행 타이밍이지만, 병렬 로드로 더 효율적입니다.
두 속성이 렌더링 파이프라인에 미치는 영향은?
async는 스크립트 실행 시 HTML 파싱을 잠시 중단해 렌더링을 지연시킬 수 있습니다. defer는 파싱 완료 후 실행되므로 렌더링 차단이 없습니다. 둘 다 비동기 로드로 초기 렌더링 성능을 개선하지만, defer가 DOM 조작이 필요한 스크립트에 더 안전합니다.
두 속성을 함께 사용할 수 있나요?
<script async defer>처럼 함께 사용할 수 있지만, 브라우저는 async를 우선 적용합니다. 즉, async가 있으면 defer는 무시되며, 스크립트는 다운로드 후 즉시 실행됩니다.
성능 최적화를 위해 async/defer 외에 어떤 방법을 사용할 수 있나요?
1. 중요 스크립트를<body>끝에 배치.
2. preload나 module로 리소스 우선순위 조정.
3. 스크립트 분할(code splitting)로 초기 로드 부담 감소.
4. requestAnimationFrame으로 DOM 조작 타이밍 최적화.
모듈 스크립트(type="module")와 defer의 관계는?
type="module"인 스크립트는 기본적으로 defer처럼 동작합니다. HTML 파싱 완료 후, 작성 순서대로 실행됩니다. 명시적으로 defer를 추가할 필요는 없지만, async를 추가하면 즉시 실행됩니다.
