script 태그의 위치

html에서 script 태그는 어디에 위치하는 것이 좋을까?

 

결론부터 말하면 body 태그 최하단에 위치하는 것이 가장 좋다.

이를 이해하기 위해서는 브라우저 동작 방식을 살펴볼 필요가 있다.

 

브라우저의 동작 방식

1. HTML을 읽기 시작
2. HTML을 파싱 (parsing: 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업)
3. DOM 트리 생성
4. Render 트리가 생성 (DOM tree + CSS의 CSSOM 트리 결합)
5. Display(브라우저)에 표시

 

여기서 중요하게 봐야 하는 구간이 1~2의 과정이다.

 

HTML을 읽고 내려가는 과정에서 script를 만나면 파싱은 중단되고, 중단된 상태에서 자바스크립트 코드를 로드 후에 자바스크립트 코드를 파싱하게 된다. 그리고 다시 HTML 파싱이 계속되는 것이다.

 

HTML을 읽는 과정에서 중단되는 시점이 생겨버린다면 display에 표시가 그만큼 늦춰진다는 것이다. 

 

또 다른 이유로 DOM 트리가 생기기 전에 자바스크립트가 실행되어 DOM 조작이 있을 경우 에러가 발생할 수 있다는 점이다.

const el = document.querySelector(.app);

이와 같이 DOM에 관한 조작이 무수하게 많을텐데 DOM 트리가 생기기 전에 자바스크립트가 실행된다면 el은 undefined가 될 것이고 이에 따라 원하지 않는 결과가 나타날 것이다.