HTML 태그를 파싱하는 중에 <script> 태그를 만나면 파싱을 중단하고 js 파일을 로드 후 js코드를 파싱한다. js 파싱 완료 후에 HTML 파싱을 이어서 한다.

HTML 태그 중간에 script 태그를 두면

1. HTML 읽는 중에 중단 시점이 생겨 그만큼 display에 표시되는 것이 지연된다.
2. DOM 트리 생성 전에 script의 이벤트 등이 생성되지 않은 DOM의 조작을 시도할 수 있다.(지연시간동안?)

→ body 태그 최하단에 두는 게 가장 best practice라고 할 수 있다.

script 로딩 순서 제어

1. async

<script async src="script.js">

async 속성을 추가하면 script태그를 만나도 HTML 파싱이 중단되지 않는다. script 로드가 병렬적으로 이루어지다 script 로드가 끝나면 HTML 파싱을 중단하고 script를 실행, script 실행이 끝나면 HTML 파싱을 재개한다.

1. defer

<script defer src="script.js">