[ js ] defer vs async

브라우저는 HTML을 읽을 때 <script>태그를 만나면 DOM생성을 멈추고 스크립트를 먼저 실행하는데, 이런 경우 아래와 같은 문제점이 발생함.

 

1. 스크립트가 먼저 작성된 경우 DOM요소에 접근할 수 없음.

2. 스크립트의 크기가 큰 경우 해당 스크립트를 다운받고 실행할 때까지 아래쪽 페이지를 볼 수 없음.

 

이런 문제를 해결할 수 있는 속성이 바로 defer와 async임.

두 속성은 기본적으로 페이지 렌더링을 막지 않는 공통점을 갖고 있으나 아래와 같은 차이점이 있음.

 

 

defer

- 페이지 생성을 막지 않아 페이지 콘텐츠가 바로 출력됨.

- DOM이 준비된 후 실행됨.
- DOMContentLoaded 이벤트 발생 전 실행됨.

- 스크립트 크기와 상관없이 작성 순서에 맞게 실행됨.

- <script>에 src 속성이 없으면 defer 속성은 무시됨.

 

 

 

async

- defer와 마찬가지로 백그라운드에서 다운.

- HTML페이지는 async스크립트가 다운되길 기다리지 않고 페이지 내 콘텐츠를 처리 및 출력함.

- async스크립트 실행 중에는 HTML 파싱이 멈춤.

- DOMContentLoaded 이벤트와 async스크립트는 서로 독립적으로 실행. (정확한 순서 예측 불가)

- <script> 작성순서에 상관 없이 먼저 로드가 된 스크립트부터 실행.

 

 

결론

- defer는 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우 적용.

- async는 Google Analytics나 네이버 애드포스트와 같은 독립적이고 실행 순서가 중요하지 않는 경우 적용.