async 속성의 특징
- 스크립트를 비동기적으로 다운로드합니다.
- 다운로드가 완료되면 즉시 실행됩니다.
- HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.
- 여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.
defer 속성의 특징
- 스크립트를 비동기적으로 다운로드합니다.
- HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.
- DOMContentLoaded 이벤트 발생 직전에 실행됩니다.
- 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행됩니다.
따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 스크립트의 경우 defer를 사용하고, 독립적으로 실행되는 스크립트(ex. Google Analytics)의 경우 async를 사용하는 것이 적절합니다.
프론트엔드 개발자