HTML에서 <script> 태그는 <head> 또는 <body> 영역에 넣을 수 있다. 그 차이를 알아보고 어떤 상황일 때 어디에 넣어야 할지를 알아보겠다.
<script>
script 태그는 1. 다운로드(fetching) 2. 실행(executing)의 두 과정을 거친다.
HTML은 구문 분석을 하는 파싱을 하다가, script 태그를 만나면 파싱을 멈추고 script 태그를 다운로드하여 실행한다. 파일의 크기가 클 경우, 로드하는 과정이 오래 걸릴 수 있다.
<head>
head 태그에 script 태그가 들어간 경우, HTML 파싱이 완료되기 전에 scipt 태그를 실행한다. 따라서 DOM 요소를 조작해야 한다면, 해당 시점에서 존재하지 않는 DOM 요소에 접근하는 문제가 발생할 수 있다. <body> 태그가 파싱되기 전이기에 js 파일이 null을 가지고 작업한다.
<body>
이에 따라서 보통 자바스크립트 파일을 body 태그 맨 하단에 작성한다. 이는 HTML 파싱을 모두 마친 후에 script 태그를 읽기 때문에, 이미 DOM 객체들도 모두 생성되어 자바스크립트 파일을 문제 없이 실행시킬 수 있다.
따라서 DOM 요소에 접근해야 하는 자바스크립트 파일의 경우, <body> 태그에 두며
이와 상관없이 빠르게 실행하려는 자바스크립트 파일이라면 <head> 태그에 두는 것이 좋다.
async와 defer는 HTML5에 추가된 <script> 속성이다. 이들은 HTML 파싱과 스크립트 다운로드를 병렬적으로 진행한다.
async
async 속성은 <script> 태그를 비동기적으로 실행하게 한다. script 태그를 다운받고 실행하는 과정에서 HTML 파싱이 멈추는 문제를 해결할 수 있다.
하지만 스크립트 태그가 여러 개 일 경우, 다운로드과 완료되는 순으로 자바스크립트 파일을 실행하기 때문에, 순서에 의존적이라면 유의해야 한다. 물론 스크립트 순서 상관없이 빠르게 실행하는 것이 중요하다면 async 속성이 효과적이다.
defer
script 태그가 여러 개일 때, defer 속성은 위에서 부터 순서대로 실행하게 한다. async 속성과 마찬가지로 HTML 파싱을 중단시키지는 않지만, 파싱이 모두 종료된 후 실행하도록 한다. 이에 따라 원하는 방향대로 스크립트를 실행할 수 있는 것이다.
'Front-end > HTML' 카테고리의 다른 글
| "<meta charset="UTF-8" />"란? - encoding 방식, Charset (0) | 2023.02.28 |
|---|---|
| OG (Open Graph) 태그란? (0) | 2023.02.23 |
