javascript defer, async

웹 프런트 개발을 할 때 외부 스크립트를 추가하는 경우가 있다.

브라우저는 HTML을 읽다가 <script>... </script> 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다.
이를 방지하기 위해서 스크립트를 페이지 맨 아래 놓는 것이 하나의 방법이 될 수 있다.
하지만 HTML 문서 자체가 아주 큰 경우 문서 전체를 다운로드 한 다음에 스크립트를 다운받게 하면 페이지가 정말 느려질 것이다.
이런 문제를 해결할 수 있는 <script> 속성이 defer와 async이다.

 

- 예시

<script src="https://javascript.info/article/script-async-defer/long.js?speed=1" defer></script>
<script src="https://javascript.info/article/script-async-defer/long.js?speed=1" async></script>

 

defer, async 둘 다 '백그라운드'에서 스크립트를 다운로드한다. DOM을 그리는 중에 다운로드가 같이 되기 때문에 페이지 로딩 속도가 빨라진다.

 

defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연된다. 다른 스크립트를 모두 다운로드할 때까지 기다린다. 그리고 스크립트를 문서에 추가한 순서대로 실행한다. defer 속성은 외부 스크립트에만 유효하다(<script>에 src가 없으면 defer 속성은 무시된다).

async 속성이 붙은 스크립트는 페이지와 완전히 독립적으로 동작한다. 다른 스크립트를 기다리지 않는다. 그래서 async스크립트가 여러 개 있는 경우, 그 실행 순서가 제각각이 된다. 실행은 다운로드가 끝난 스크립트 순으로 진행된다.

 

출처: https://ko.javascript.info/script-async-defer

실무에선 defer를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용한다.
async는 방문자 수 카운터나 광고 관련 스크립트 같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용한다.