---

📝 2022. 11. 10

JavaScript / script 태그의 위치

---

📌 Today I Learned

• script 태그의 위치

💬 Script

아래의 방식으로 브라우저가 동작한다.

1. HTML을 읽기 시작한다.
2. HTML을 파싱한다.
3. DOM 트리를 생성한다.
4. Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성된다.
5. Display에 표시한다.

HTML을 파싱한 다음 DOM 트리를 생성한다. 브라우저는 HTML 태그들을 읽어나가는 도중 <script> 태그를 만나면 파싱을 중단하고 javascript 파일을 로드 후 javascript 코드를 파싱하게 되는데, 완료되면 그 후에 HTML 파싱이 계속 된다.

알려진 방법은 4가지 정도가 있다.

• head 안에 존재하는 경우
• body 끝 부분에 존재하는 경우
• head + async
• head + defer
  
  

📂 head 안에 존재하는 경우

가장 피해야하는 방법으로, html을 파싱하다가 중간에 멈추고 js를 가져오게 된다.

📂 body 끝 부분에 존재하는 경우

• 장점 : 기본적인 html 태그들을 빠르게 볼 수 있다.
• 단점 : 웹 사이트가 많이 js에 의존적일 경우엔 정상적인 페이지를 보기까지 오래 기다려야한다.

📂 head + async

html을 파싱하다가 js를 만나면 일단 병렬로 fetching 한다.
fetching이 완료되면 실행을(executing) 한다.
executing 마저 완료되면 html을 파싱한다.

• 장점: 다운로드 시간을 줄일 수 있다.
• 단점: html 파싱이 완료되기 전에 js가 실행되기 때문에, js에서 DOM요소를 다루는 코드가 있을 경우 위험해질 수도 있다.
  또한, 여러개의 작업을 병렬처리하다가 먼저 끝난 애부터 실행하기 때문에, js가 순서대로 동작해야하는 경우에는 제대로 동작되지 않는다.

📂 head + defer

가장 좋은 방법으로, html 파싱을 하는 동안에 js를 fetching하고, html 파싱이 끝나면 js를 실행(execute)한다.

우리가 원하는 것과 같이 순서대로 동작한다.

💬 body 최하단이 가장 좋은 이유

HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생한다.
HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
이와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 가장 다다.