[HTML] script 태그의 defer, async

1. 기본 동작 원리

- 브라우저가 html을 읽다가 (= html 파싱) script 태그나 외부 script를 만나면, DOM 생성을 중단하고 script를 다운받고 실행함

// script 태그
<script></script>

// 외부 script
<script src="주소" />

- script 아래에 있는 DOM 요소에는 접근할 수 없음

 

DOM tree가 생성되기 전에 js 파일이 실행되었고, getElementById로 선택한 요소가 null이므로 addEventListener 실행 시 에러 발생

 

- script 용량이 큰 경우, script를 다운받는 동안 사용자는 script 아래쪽 페이지를 볼 수 없음

 

2. script를 페이지 맨 아래 배치

- 1번에서 언급된 부작용은 해결되나,

- html 문서 용량이 큰 경우, html을 다운받은 후 script를 다운받으면 페이지가 굉장히 느려짐

3. defer 속성 사용 (지연 스크립트)

<script defer src="주소" />

- script를 백그라운드에서 다운받으므로 html 파싱이 멈추지 않음

- html 파싱이 끝난 후, DOMContentLodaded 이벤트가 발생하기 전에 script가 실행됨

- html 문서에 추가된 순서대로 script가 실행됨

4. async 속성 사용 (비동기 스크립트)

<script async src="주소" />

- defer 속성과 마찬가지로 script를 백그라운드에서 다운받으므로 html 파싱이 멈추지 않음

- html 파싱 완료 여부와 상관없이 다운로드 되면 script가 실행됨

- script가 실행될 때는 html 파싱이 멈춤

- 먼저 다운로드 된 script가 먼저 실행됨

 

 

 

출처

모던 JavaScript 튜토리얼