<script async> / <script defer> 언제 사용하면 좋을까?

script 호출 방식을 지연하는 것에 async와 defer가 있습니다.

언제 사용하면 좋을까요?

 

async는 DOM에 직접 연관이 없거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립적으로 실행해야할 때 효과적입니다.

구글 애널리스틱스, 쿠키봇 등 독립적으로 사용되는 서드파티 스크립트들은 async가 적합합니다.

<script async src="https://google-analytics.com/analytics.js"></script>

 

defer도 async와 마찬가지로 병렬로 로드합니다. 

async와 유일한 차이점은 defer는 DOM이 모두 로드 된 이후에 실행이 일어납니다.

그래서 순서가 보장된다는 차이점이 있습니다.

 

때문에 기본적으로 DOM의 모든 요소에 접근할 수 있고, 실행 순서도 보장이 됩니다. 

스크립트 파일끼리 의존성이 있을 경우 사용하면 좋습니다.

<script src="prev.js" defer></script>
<script src="next.js" defer></script>