처음에는 지난 포스트에 3번 단락으로 넣을까 했는데 내용이 생각보다 방대해서 별개의 포스트로 빠졌습니다.
결과 부터 이야기하자면 </body>(body의 닫는 태그)직전에 넣는 것이 좋다고 합니다.
들어가기 전에 개인적인 경험을 이야기하자면 배우는 과정에서 보통 <head>~</head>사이에 넣는 책과 문서, 강의들이 많았는데 블로그를 기술하기 위해 뒤져보다 방법을 발견하게 되었습니다.
0. <script>태그
재밌는 이야기 부터 하고 넘어가자면 <script>태그는 html 문서의 가장 바깥 태그인 <html>~</html>사이에 아무데나 넣어도 적용이 됩니다. 하지만 빠른 구동, 정형화된 구조를 생각하면 아무데나 놓는것은 좋지 못한 행동입니다.
1.웹 페이지의 처리
이 위치를 설명하기전에 웹 페이지의 처리를 간단하게 설명하겠습니다. 웹 페이지는 기본적으로 html, css, javascript로 이루어져있는데 html은 구조를, css는 표현(디자인)을, javascript는 기능적인 부분을 담당합니다. 이렇게 구성된 웹 페이지는 다음과 같은 과정을 거칩니다.
1. 클라이언트 웹 페이지 접속 시 서버로 요청을 보낸다. (클라이언트는 웹 브라우저)
2. 서버에서 html파일을 응답하고 클라이언트는 html파일을 파싱한다.
3-1. DOM(Document Object Model)트리를 생성한다.
3-2. html 파싱에서 <link>의 css파일 요청이 있다면 서버에 css 파일을 요청합니다.
3-3. 서버에서 css파일을 응답하고 클라이언트는 이를 파싱하여 CSSOM(CSS Object Model)트리를 생성합니다.
4. 생성된 DOM과 CSSOM은 결합되어 Render 트리를 만든다.
5. 디스플레이에 보여지게 된다.
기본적으로 이 과정을 거치게 되는데 이때 javascript를 삽입하는 <script>태그가 들어가게 된다면 3번에 다음과 같은 과정이 추가됩니다.
3-4. 서버에 js파일을 요청하고 서버는 이를 전송합니다.
3-5. 클라이언트는 js파일을 파싱하여 신택스(syntax)트리를 생성합니다.
※이때 렌더 트리의 생성은 자바스크립트파일의 처리가 끝날 때 까지 멈춰있어야합니다.
우리 눈에 보이기 위해서는 render 트리가 생성되어 디스플레이가 이루어져야 하는데, 자바스크립트 파일 요청시 렌더트리의 생성이 멈추기 때문에 <script>를 표기하는 위치에 따라서 로딩 속도가 달라지게 되는 것 입니다.
2. <head>~</head> 사이
<head>태그 내에는 html 문서에 대한 정보나 css파일 등의 링크가 있기 때문에 이곳에 넣을 경우 렌더링에 영향을 줍니다. 물론 가벼운 스크립트의 경우에는 미비하겠지만 무겁거나 많은 스크립트를 처리할 경우 위에 말한대로 렌더 트리 생성을 방해하기 때문에 로딩이 늦어지게됩니다. 그래서 다음과 같은 두가지 경우에만 사용합니다.
1. <body>요소 내부에서 함수를 호출 해야할 때 <head>에 기술하여 미리 로드하도록 한다.
2. 스크립트내부에서 스타일 시트를 조작할 때 본문 출력 이전에 미리 로드하도록 한다.
3. <body>태그의 내부 (<body>~</body>사이)
스크립트의 처리 결과를 직접 출력할 때 이용했었으나 코드와 스크립트의 혼용은 혼란을 불러일으키고 유지보수를 어렵게 하기에 사용되지 않습니다. 비사용 권장
4. </body>태그의 바로 앞
위에서 언급된 웹 페이지의 처리에 따라 모든 화면이 렌더되고나서 스크립트가 실행 되므로 실제로 보이는(갱신되는) 화면의 속도가 고속화 됩니다. 그래서 주로 </body>태그 직전에 <script>태그를 삽입하게됩니다.
또한 <head>태그에 삽입했을 때 일어나는 window.onload 관련 오류나 기타 처리가 필요 없기에 주로 이부분에 <script>태그 삽입을 하게됩니다.
작성에 도움이 된 참고 자료들
자바스크립트 삽입방식과 위치
자바스크립트 삽입방식 자바스크립트를 실행하는 방법은 문서안에 type="text/javascript" 부분은 HTML5에서는 생략할 수 있다. 문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다. 전자의 경우
webdir.tistory.com
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] 주석 (0) | 2021.01.27 |
|---|---|
| [Javascript] 자바스크립트의 기본 규칙 (0) | 2021.01.27 |
| [Javascript] html 파일에 자바스크립트 삽입하기 (0) | 2021.01.25 |
| [JavaScript] Hello World! (0) | 2021.01.25 |
| [Javascript] 에디터 설치하기 (0) | 2021.01.22 |
댓글