script 태그와 script async, script defer의 차이

<script> : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드가 끝난 스크립트가 실행된 후 파싱이 재개된다. <body>태그 최하단에 위치시킨다.
- 장점 : HTML 컨텐츠를 빨리 볼 수 있음
- 단점 : 자바스크립트가 포함된 컨텐츠를 볼 때는 많은 로딩 시간이 필요함
<script async> : 병렬적으로 스크립트를 로딩하다가 로딩이 끝나면 그 즉시 스크립트가 실행되고 이후에 HTML 파싱이 재개된다.
- 장점 : <body> 끝에 태그를 위치시키는 것보다는 병렬적으로 로드가 되기 때문에 다운로드 시간을 절약할 수 있다.
- 단점 : HTML 파싱 전에 자바스크립트 코드가 실행될 수 있다.
<script defer> : 스크립트를 계속 로드하면서 HTML 파싱을 이어간다. 파싱이 끝나면 로드한 스크립트를 실행한다.

다수의 스크립트를 다운로드

다수의 스크립트를 받을 때 async를 사용하면 다운로드가 먼저 끝나는 순서대로 코드가 실행된다. defer를 사용하면 순서대로 실행할 수 있다. 따라서, 기본적으로 defer를 사용하고 다수의 스크립트를 로드할 때도 defer를 사용한다.