자바스크립트의 <script> 태그에서 defer와 async 속성
자바스크립트 파일을 HTML 문서에 포함할 때 <script>태그를 사용한다. 이때 스크립트의 로드 및 실행 방식을 제어하기 위해 defer와 async속성을 사용할 수 있다.
이 두 속성의 차이점와 사용 방법에 대해 알아본다.
1. defer 속성
1) 설명
defer속성은 스크립트의 다운로드를 HTML 문서의 파싱과 병렬로 수행하고, 문서의 파싱이 완료된 후 스크립트를 순서대로 실행한다.
2) 특징
-
HTML 파싱을 막지 않음
스크립트가 로드되는 동안 HTML 파싱이 계속된다. -
순차적 실행
여러 스크립트가defer속성을 가지고 있다면, 그 순서대로 실행된다. -
DOMContentLoaded 이벤트 전에 실행
스크립트는 DOM 트리가 완전히 구축된 후,DOMContentLoaded이벤트가 발생하기 전에 실행된다
✔️ DOMContentLoaded
HTML 문서의 초기 DOM 트리가 완전히 구축되었을 때 발생하는 이벤트이다. 스타일시트, 이미지 및 하위 프레임 등의 리소스가 모두 로드될 필요는 없으며, 오직 HTML과 DOM 트리의 구축이 완료되면 발생한다.
3) 예시
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>2. async 속성
1) 설명
async속성은 스크립트의 다운로드를 HTML 문서의 파싱과 병렬로 수행하고, 다운로드가 완료되면 바로 실행한다.
2) 특징
-
HTML 파싱을 막지 않음
스크립트가 로드되는 동안 HTML 파싱이 계속된다. -
비순차적 실행
여러 스크립트가async속성르 가지고 있다면, 다운로드가 완료되는 순서대로 실행된다. -
DOMContentLoaded 이벤트와 독립적
스크립트는 다운로드가 완료되는 즉시 실행되므로, DOMContentLoaded 이벤트와 상관없이 실행될 수 있다.
3) 예시
<script src="script1.js" async></script>
<script src="script2.js" async></script>3. defer 와 async 비교
1) 공통점
두 속성 모두 스크립트의 다운로드를 HTML 파싱과 병렬로 수행한다.
HTML 파싱을 차단하지 않으므로 페이지 로드 성능을 향상시킬 수 있다.
2) 차이점
- 실행 시점
defer: HTML 문서의 파싱이 완료된 후, 스크립트가 순서대로 실행된다.
async: 스크립트의 다운로드가 완료 순서대로 실행된다.
4. 언제 사용해야 할까?
-
defer
스크립트가 DOM에 의존하는 경우
여러 스크립트 파일이 순서대로 실행되어야 하는경우 -
async
스크립트가 독립적이고 다른 스크립트나 DOM의 상태에 의존하지 않은 경우
페이지 로드 시간을 최적화하고 싶은 경우
이 두 속성을 적절히 사용하면 자바스크립트의 로드 및 실행 방식을 최적화하여 페이지 성능을 향상시킬 수 있다.
