script 태그 async, defer 옵션

script 태그에 src 자원이 존재할때만 지정할 수 있는 옵션으로

아래와 같이 정의할 수 있다.

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

 

모두 페이지 렌더링을 막지 않으면서 스크립트 코드를 다운로드 하는 점은 동일한데

아래와 같은 차이가 있다.

 

defer를 지정할 경우 다운로드는 백그라운드에서 독립적으로 수행되지만

스크립트 실행은 페이지 구성이 끝난 뒤에 수행된다.

defer 이 지정된 script 태그가 여러개일 경우 다운로드는 각각 수행되지만

실행은 페이지 구성이 끝나고 문서에 추가한 순서대로 진행된다.

 

async 를 지정할 경우 해당 스크립트는 다운로드와 실행 모두 독립적으로 수행된다.

async 가 지정된 script 태그가 여러개일 경우에도 각각 독립적으로 수행된다.

다만 스크립트 실행 중에는 페이지 렌더링이 멈춘다.

 

아래와 같은 동적 스크립트는 기본적으로 async 옵션을 준 것과 동일하게 동작한다.

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
document.body.append(script);

 

아래와 같이 동적스크립트를 다수 정의하더라도 다운로드와 실행 모두 독립적으로 수행되고

이에 실행되는 순서를 보장받을 수 없다.

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
document.body.append(script);

script = document.createElement('script');
script.src = "/article/script-async-defer/long2.js";
document.body.append(script);

 

만약 문서에 정의한 순서대로 실행되길 원한다면 아래와 같이 async를 false 로 지정해야 한다.

물론 이렇게 하더라도 다운로드 자체는 독립적으로 수행된다.

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
script.async = false;
document.body.append(script);

script = document.createElement('script');
script.src = "/article/script-async-defer/long2.js";
script.async = false;
document.body.append(script);