javascript의 defer vs async 개념 정리

#1 defer

html을 바로 다운로드 하지만,
html 구문 분석도 차단하지 않도록 해서
html 구문 분석을 계속 하고
구분 분석이 끝난 후에만 스크립트가 시작 되는 것임.

쉽게, javascript가 html 보다 앞서는 경우, 로딩에 걸려서
html로딩이 지연되면 차단되기도 하니깐, 
html에 우선권을 주고, html이 구문 분석이 완료되면 (열리면)
그때, html의 뒷 순서에 상관없이 javascript가 양보하게 되는 것.

한마디로는 defer은 javascript가 먼저 있을때 html에 양보해주는 것

---

#2 async

html에 의존적이지 않아서, 쓰여있는 순서에 상관없이
마치 매직패스였나? 롯데월드의 그 개념처럼
html 구문해석이 완료되지 않아도 javascript부터 쓰이는 것

일종의 vip 느낌

---

#3 defer와 async의 공통 특징

신기하게도, defer와 async의 기능은 위에 말한대로지만,
a html에서 b javascript 파일을 불러오는 거라면 적용이 되지만
html 파일 내부에서
<script>Hi!</script>
이런식으로 하드코딩이든, 함수든 뭐든
현재 작성중인 html 기준으로 "외부"의 javascript파일을 읽어오는게 아니라면
defer를 쓰나 안쓰나, async를 쓰나 안쓰나 똑같다.