async와 defer의 차이점

<script> 태그에서 async와 defer는 스크립트를 비동기적으로 로드한다는 공통점이 있지만, 실행 시점과 순서에서 큰 차이가 있다.

async 속성

• 특징
  1. 비동기 다운로드: HTML 파싱과 동시에 스크립트를 다운로드한다.
  2. 즉시 실행: 다운로드가 완료되면 바로 스크립트를 실행하며, 이 시점에 HTML 파싱은 잠시 중단된다.
  3. 실행 순서가 불규칙: 여러 async 스크립트가 있을 경우, 다운로드가 완료된 순서대로 실행된다.
• 적합한 경우
  • 다른 스크립트나 HTML 구조와 독립적으로 실행되는 코드에 적합하다.
  • 예: Google Analytics, 광고 스크립트 등 페이지와 상호작용하지 않는 외부 도구

 

defer 속성

• 특징
  1. 비동기 다운로드: HTML 파싱과 동시에 스크립트를 다운로드한다.
  2. HTML 파싱 이후 실행: HTML 문서 파싱이 끝난 후, DOMContentLoaded 이벤트가 발생하기 직전에 실행된다.
  3. 작성 순서 보장: 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행된다.
• 적합한 경우
  • HTML 문서 구조나 다른 스크립트에 의존성이 있는 코드에 적합하다.
  • 예: 메인 애플리케이션 로직, DOM 조작 코드 등

 

주요 차이점

특성	async	defer
다운로드 방식	비동기적으로 다운로드	비동기적으로 다운로드
실행 시점	다운로드 완료 즉시 실행	HTML 파싱이 완료된 후 실행
실행 순서	다운로드 완료된 순서대로 실행	HTML에 작성된 순서대로 실행
HTML 파싱 중단	실행 시 중단됨	중단되지 않음

 

독립적으로 실행되는 스크립트엔 async를 사용하고, 실행 순서와 HTML 의존성이 중요한 스크립트엔 defer를 사용한다.

예를 들어, 분석 도구와 같은 외부 스크립트는 async를, 웹 애플리케이션의 메인 로직은 defer를 사용하는 것이 일반적이며, 이를 통해 웹 페이지의 로딩 성능과 사용자 경험을 최적화할 수 있다.