async defer load
-
<script async> / <script defer> 언제 사용하면 좋을까?Javascript 2021. 3. 2. 00:38
script 호출 방식을 지연하는 것에 async와 defer가 있습니다. 언제 사용하면 좋을까요? async는 DOM에 직접 연관이 없거나, 다른 스크립트에 의존적이지 않은 스크립트들을 독립적으로 실행해야할 때 효과적입니다. 구글 애널리스틱스, 쿠키봇 등 독립적으로 사용되는 서드파티 스크립트들은 async가 적합합니다. defer도 async와 마찬가지로 병렬로 로드합니다. async와 유일한 차이점은 defer는 DOM이 모두 로드 된 이후에 실행이 일어납니다. 그래서 순서가 보장된다는 차이점이 있습니다. 때문에 기본적으로 DOM의 모든 요소에 접근할 수 있고, 실행 순서도 보장이 됩니다. 스크립트 파일끼리 의존성이 있을 경우 사용하면 좋습니다.