defer, async 스크립트

[TL DR]

defer script
- 다운 만 백그라운드로 하고 HTML 파싱 완료 후에 모든 로직 실행 하고DOMContentLoaded 이벤트 생성
async script
- 순서 무시하고 백그라운드로 다운 완료되면 로직 바로 실행
- 로직 실행중에는 HTML 파싱 중단
- DOMContentLoaded 이벤트랑은 전후관계 알 수 없음

[HTML 파싱시 생기는 문제]

<script>...</script> 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춥니다.
이는 src 속성이 있는 외부 스크립트 <script src="..."></script>를 만났을 때도 마찬가지입니다. 외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있습니다.
- 스크립트는 스크립트 아래에 있는 DOM 요소에 접근할 수 없습니다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능
- 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 ‘막아버립니다’
```
<p>...스크립트 앞 콘텐츠...</p>

<script src="<https://javascript.info/article/script-async-defer/long.js?speed=1>"></script>


<p>...스크립트 뒤 콘텐츠...</p>
```

순서

HTML 파싱 중에 스크립트 태그 나오면 파싱 중단하고 해당 스크립트 다운로드 + 실행 그 후 HTML 파싱 계속

임시 해결책

script 태그를 맨 아래애 두기

<body>
  ... 스크립트 위 콘텐츠들 ...

  <script src="<https://javascript.info/article/script-async-defer/long.js?speed=1>"></script>
</body>

네트워크가 느린 곳에서는 HTML문서가 아주 큰 경우 HTML 받고 나서 그다음에 다시 script 받게 하면 엄청 느리다 → 동시에 하면 좋겠지

[defer script]

defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드

따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않는다

<p>...스크립트 앞 콘텐츠...</p>

<script defer src="<https://javascript.info/article/script-async-defer/long.js?speed=1>"></script>

<!-- 스크립트 실행과 상관없이 바로 볼 수 있네요! -->
<p>...스크립트 뒤 콘텐츠...</p>

순서

HTML 파싱하면서 스크립트 다운 → 파싱 완료 후 DOMContentLoaded 이벤트 직전 스크립트 실행