728x90
반응형
먼저, 두 속성 모두 스크립트를 비동기적으로 로드한다는 공톰점이 있습니다. 하지만 실행 시점에서 중요한 차이가 있습니다.
async
- 스크립트를 비동기적으로 다운로드 합니다.
- 다운로드가 완료되면 즉시 실행됩니다.
- HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.
- 여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.
defer
- 스크립트를 비동기적으로 다운로드 합니다.
- HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.
- DOMContentLoaded 이벤트 발생 직전에 실행됩니다.
- 여러 defer 스크립트가 있을 경우, HTML 에 작성된 순서대로 실행됩니다.
따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 스크립트의 경우 defer 을 사용하고, 독립적으로 실행되는 스크립트 (Google Analytics)의 경우 async를 사용하는 것이 좋습니다.
정리!
| 일반 <script> | HTML 읽다가 만나면 다운로드 | 다운로드 끝나면 바로 실행 | 작성된 순서대로 실행 (하지만 HTML 파싱 멈춤) |
| async | HTML 파싱과 동시에 다운로드 | 다운로드 끝나면 바로 실행 | 순서 보장 ❌ (랜덤) |
| defer | HTML 파싱과 동시에 다운로드 | HTML 파싱 끝난 후 실행 | 순서 보장 ✅ |
✅ 일반 <script> (동기 실행)
- HTML 파싱을 블록(멈춤) 하기 때문에 사용 지양
- 정말 중요한 코드라면 <head>에 넣고 사용 가능 (ex. document.write())
✅ async (비동기 실행)
- 실행 순서가 중요하지 않은 광고, 분석 스크립트(Google Analytics)
✅ defer (HTML 파싱 후 실행)
- 메인 로직이 포함된 스크립트 (Vue, React 등)
- 여러 스크립트가 실행 순서를 지켜야 할 때
https://www.maeil-mail.kr/question/37
매일메일 - 기술 면접 질문 구독 서비스
기술 면접 질문을 매일매일 메일로 보내드릴게요!
www.maeil-mail.kr
728x90
반응형
'매일 공부 > Frontend CS' 카테고리의 다른 글
| [매일메일] useEffect와 useLayoutEffect의 차이점 (0) | 2025.04.07 |
|---|---|
| [매일메일] 웹 애플리케이션의 성능을 최적화할 수 있는 방법 (1) | 2025.04.01 |
| [매일메일] CommonJS와 ES Module의 차이점에 대해서 설명 (1) | 2025.03.28 |
| [매일메일] 자바스크립트 함수에 대해서 아는대로 설명 (0) | 2025.03.26 |
| [매일메일] 자바스크립트 배열에 대해서 설명 (0) | 2025.03.25 |