<script> 태그는 <head> 내에 혹은 <body> 최하단에 위치할 수 도 있지만
보통 <body> 태그의 최하단에 <script>를 위치하는 것이 좋다고 한다.
그렇다면 왜일까?
1.
첫번째 이유를 알아보기 전에
우선 브라우저 동작 과정을 간단하게 다시 한 번 상기시켜보자.
- HTML parser -> DOM tree
- CSS parser -> CSSOM
- DOM + CSSOM => Render tree
- Layout
- Paint
일련의 과정 중, HTML 파싱 과정에서 script 요소를 만나게 되면 ?
HTML 파서는 파싱을 멈추고
자바스크립트 코드를 로드 후 파싱이 완료되고 나서야 다시 HTML 파싱을 재개한다.
=> 이렇게 중단되며 화면 표시에 지연이 생기는 것을 방지하기 위해 body 최하단에 작성한다.
2.
두번째 이유는
자바스크립트 코드 내에서 DOM을 조작하게 되는 경우가 무수히 많다.
이때 DOM 트리가 제대로 그려지지않은 상태에서
자바스크립트가 실행되어 존재하지도 않는 요소에서 DOM 조작을 시도하게된다면 오류가 발생한다.
정리
- HTML 파싱 중간에 scrpt 요소를 만나 생기게 되는 화면 표시의 지연을 방지하기 위해
- DOM 트리가 제대로 생성되기 전에 조작하여 발생하는 오류를 방지하기 위해
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'JS > Javascript' 카테고리의 다른 글
| [JS] querySelector , querySelectorAll ? (0) | 2021.08.05 |
|---|---|
| [JS] 자바스크립트 표준 내장 객체 : Date (0) | 2021.08.04 |
| [JS] 자바스크립트 스코프 ? : 변수의 유효 범위 (0) | 2021.07.29 |
| [JS] 자바스크립트 엔진 V8 (0) | 2021.07.29 |
| [Javascript] 자바스크립트 배열 정렬 함수 : Array.prototype.sort() (0) | 2021.07.04 |