1. script 태그의 위치는 body 태그의 가장 하단에 위치하는게 가장 좋다.
2. body 태그의 가장 하단이 좋은 이유?!
- 브라우저의 동작 과정
1.우리가 어떤 웹페이지를 접근할때.
2.브라우저(크롬, 엣지, 파이어폭스)가 HTML 태그들 해석하여 DOM 트리 생성
3.각 스타일 정보를 해석하여 스타일 구조체 생성.
스타일 정보는 단계적으로 처리되며, 가장 마지막 단계의 스타일 정보가 이전 스타일보다 우선으로 적용된다.
4.스타일 구조체와 DOM 트리를 바탕으로 렌더트리 생성.
렌더 트리는 DOM 트리와 다르게 각 노드(HTML 태그)의 스타일 정보가 설정되어 있다.
5.해당 트리 정보를 바탕으로 화면에 표시한다
-
여기서 2, 3, 4 번 과정을 통하여 각 코드를 해석을 하는데 만약에 html, css 태그들을 해석하고 있을때 중간에 script 태그를 만나게 된다면 html,css 해석 과정을 멈추고 script 태그를 해석한다. script 해석이 완료되면 이어서 html, css 해석한다.
-
그래서 html 이나 css 태그의 중간에 script 태그가 존재 한다면
- html, css 해석 하는 과정에 script를 만나게 된다면 해당 해석 하는 과정이 중단되므로 그만큼 화면에 표시되는 결과 시점도 지연된다.
- DOM트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있는 문제점이 있다. (DOM 생성시점은?!)
결론
스크립트 태그는 body 태그의 가장 하단에 위치해야 한다.
ENJOY!! PROGRAMING!!