공통점
두 속성 모두 스크립트를 비동기적으로 로드한다는 특징.
async 속성
- 스크립트를 비동기적으로 다운로드
- 다운로드가 완료되면 즉시 실행
- HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단
- 여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행
defer 속성
- 스크립트를 비동기적으로 다운로드
- HTML 문서 파싱이 완전히 끝난 후에 실행
- DOMContentLoaded 이벤트 발생 직전에 실행
- 여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행
사용 권장사항
- defer: 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직
- async: 독립적으로 실행되는 스크립트 (예: Google Analytics)
이러한 차이를 이해하고 적절히 활용하면 웹 페이지의 로딩 성능을 최적화하는 데 큰 도움이 됨.
안녕하세요 김선명입니다.