<script> 태그는 어디에 위치해야 할까요?
<script> 태그는 어디에 위치하는 게 가장 좋을까요?
일단은 body 태그 최하단에 위치하는 게 가장 좋습니다.
이를 이해하기 위해선 브라우저의 동작 방식을 이해할 필요가 있습니다.
브라우저의 동작 방식
- HTML을 읽기 시작한다.
- HTML을 파싱한다.
- DOM 트리를 생성한다.
- Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
- Display에 표시한다
여기서 주목해야 할 부분은 1, 2, 3의 순서입니다. HTML을 파싱한 다음 DOM 트리를 생성하죠.그런데 브라우저는 HTML 태그들을 읽어나가는 도중 <script> 태그를 만나면 파싱을 중단하고 javascript 파일을 로드 후 javascript 코드를 파싱합니다. 완료되면 그 후에 HTML 파싱이 계속 됩니다.
body 태그 최하단이 가장 좋은 이유
이로인해 HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생합니다.
- HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
- DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 가장 좋습니다.
script 로딩 순서 제어하기
그러나 script 태그를 body 태그 최하단에 놓기 싫거나, 할 수 없는 상황도 있을 수 있겠죠
그럴 때 활용할 수 있는 다른 방법도 있습니다.
1. script 태그의 속성으로 로딩 순서 제어하기
script 태그의 async와 defer 속성을 활용하면 스크립트 로딩 순서를 제어할 수 있습니다.
async
위와 같이 asnyc 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 아래 그림과 같이 작동합니다.
보시다시피 script 태그를 만나도 html parsing이 중단되지 않습니다. script 로드와 html parsing이 함께 이루어지다가 script 로드가 끝나면 script가 실행되는 시점에 html parsing이 잠시 중단되고 실행이 끝나면 html parsing이 재개됩니다.
defer
위와 같이 defer 속성이 더해진 script 태그가 HTML 태그 사이에 있는 경우 아래 그림과 같이 작동합니다.
보시다시피 script 태그를 만나도 script 로드의 시작부터 끝까지 html parsing이 중단되지 않으며 html parsing이 끝나고 난 뒤에야 script가 실행됩니다.
2. script 내부에서 로딩 순서 제어하기
DOMContentLoaded 와 onload
DOMContentLoaded와 onload를 활용하면 javascript 자체에서 로딩 순서를 제어할 수도 있습니다.
DOMContentLoaded 내부의 코드는 DOM 생성이 끝난 후에 실행되고
onload 내부의 코드는 문서에 포함된 모든 콘텐츠(images, script, css, ...)가 전부 로드된 후에 실행됩니다.
따라서
위 코드의 console에 출력된 결과는
일반 script 코드 -> DOMContentLoaded 안의 코드 -> window.onload 안의 코드 순으로 출력됩니다.
참조
HTML에서 script태그는 어디에 위치해야 할까?
script의 async와 defer 속성
부스트코스- 웹프로그래밍 - DOMContentLoaded 이벤트