defer

브라우저가 HTML을 다 읽고나서 스크립트를 읽기 시작한다.

만약 여러개의 스크립트라면 defer는 순서를 지켜서 sample1 > sample2 순으로 스크립트를 읽는다.

<script defer src="sample1.js"></script>
<script defer src="sample2.js"></script>

async

브라우저가 HTML을 읽다가 스크립트 다운로드가 완료되면 브라우저는 HTML읽는 것을 중단하고 스크립트를 읽게된다. 이렇게되면 defer나 asnyc가 없을때처럼 DOM요소에 접근 할 수 없게 된다.

그리고 여러개의 스크립트를 만나면 asnyc는 스크립트 순서와 상관없이 먼저 다운받아지는 스크립트를 읽게된다.

<script async src="sample1.js"></script>
<script async src="sample2.js"></script>