src async defer

<script async src="extern.js"></script>
<script defer src="extern.js"></script>

async attribute

Html 파싱과 외부 js 파일의 로드가 비동기적으로(기다리지 않고) 동시에 진행 된다. 자바스크립트의 파일의 파싱과 실행은 자바스크립트 파일의 로드(다운로드)가 완료된 직후 진행되며, 이 때 HTML 파싱이 중단된다.
여러 개의 script 태그에 async를 지정하면 script 태그 순서 상관 없이 로드가 완료된 js 파일부터 먼저 실행되서 순서를 보장하지 않는다.

defer attribute

마찬가지로 비동기적으로 동시에 진행된다.
단, 자바스크립트의 파싱과 실행은 html 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후(DOMContentLoaded event 발생)
따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용.
하지만 무거운 자바스크립트 파일인 경우 원하지 않은 DOM 화면이 나올 수 있기 때문에 loading 같은 화면으로 유저에게 미리 알려야 한다.

참고

모던 자바스크립트
https://gobae.tistory.com/110