인프런 커뮤니티 질문&답변
작성한 질문수
답변 1
1
안녕하세요, Sujin Lee님!
결론을 먼저 말씀드리자면, <script> 태그는 <body> 태그 최하단에 위치하는 것이 좋습니다.
이것을 이해하기 위해서는 브라우저의 동작 방식을 이해할 필요가 있습니다.
브라우저의 동작 방식
- HTML을 읽기 시작한다.
- HTML을 파싱한다.
- DOM 트리를 생성한다.
- Render 트리 (DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
- Display에 표시한다.
위의 순서를 보면, HTML을 파싱한 다음 DOM 트리를 생성합니다. 그런데 브라우저는 HTML 태그들을 읽어나가는 도중 <script> 태그를 만나면 파싱을 중단하고 javascript 파일을 로드 후 javascript 코드를 파싱합니다. javascript 파싱이 완료되면 그 후에 HTML 파싱이 계속됩니다.
HTML 태그들 사이에 script 태그가 위치하면 두 가지 문제가 발생합니다.
HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연됩니다.
그리고 DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있습니다.
위와 같은 상황들을 막기 위해 script 태그는 body 태그 최하단에 위치하는게 가장 좋습니다.
혹시 궁금하신 점이 있다면 댓글 남겨주세요.
도움이 되었으면 좋겠습니다. :)