html async script defer script

html async script defer script

script defer

html script defer는 script 다운로드를 백그라운드에서 실행합니다.

<script defer scr=""></script> 
<!-- 다음과 같이 사용할 수 있습니다. -->

이렇게 script를 사용하였을 때 좋은점은 무엇이 있을까요?

1. html 초반에 script 태그가 존재하였을 때, script가 다운로드 되기 전에 페이지가 보이지 않는데, defer를 붙이고 사용하면 html load와 script 다운로드가 따로 되어, 사용자 입장에서 로드가 빨리 되는 것 처럼 보입니다.
2. html에서 DOM이 준비되어야만 script가 실행됩니다. (DOMContentLoaded 실행 이전에 실행됨)

<p>스크립트 이전의 요소</p>

<script defer src="주소"></script>

<!-- 스크립트를 기다리지 않습니다. -->
<p>스크립트 이후의 요소</p>

script async

html script async은 페이지와 완전히 따로 실행됩니다.

<script async src=""></script>
<!-- 다음과 같이 사용할 수 있습니다. -->

async의 특징은 다음과 같습니다.

1. defer와 비슷하지만, async은 스크립트 실행중에는 html parsing이 막힙니다.
2. DOMContentLoaded고 뭐고 그냥 실행됩니다.

출처

korea javascript info