script 태그란
- HTML에서
<script>태그는 HTML 문서 내에서 태그 내에 있는 것을 JavaScript로 표현한다는 뜻을 나타낸다. - .js 를 통해 HTML에 별도로 만든 JavaScript 파일을 다운로드하여 실행한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="main.js"></script>script 태그의 위치 어디가 좋은가?
- 대게 HTML head 끝 부분과 body 끝 부분에 작성한다.
⚙️ 제일 알맞는 태그의 위치를 알려면 웹브라우저의 동작 방식을 먼저 알아야 이해할 수 있다.
웹브라우저 작동 순서
<head>태그 끝에<script>태그 들어갈 경우 브라우저 작동 순서는 아래와 같다.
- 웹브라우저가 HTML 코드를 읽어내려오다가
<script>태그를 보게 되면, JS 파일을 다운로드하고 실행시키기 위해 HTML을 읽어오는 과정을 잠깐 멈춘다. 그리고 JS 파일을 모두 다운로드하고 실행시킨 이후에 다시 나머지 HTML 코드를 읽게 된다.위 방식의 단점 :
- JS 파일 용량이 크거나 파일 갯수가 많다면 해당 파일을 다운로드하고 실행시키는데 많은 시간이 소요되어, 사용자가 화면을 보기까지 많은 시간이 걸릴 수도 있음.
- JS 파일 내부에 HTML에서 쿼리를 조회하고 조작하는 부분이 있을 때, 해당 쿼리 실행을 할 수 있는 HTML 코드가 JS가 실행된 다음에 위치해있다면 문제가 생길 수 있음.
❓쿼리 : 웹 서버에 특정한 정보를 보여달라는 웹 클라이언트 요청(주로 문자열을 기반으로 한 요청이다)에 의한 처리이다.
<body>태그 끝에<script>태그 들어갈 경우 브라우저 작동 순서는 아래와 같다.
- 위와 그림과 같이 HTML 코드를 처음부터 읽어내려오면서 모든 HTML 코드를 읽었을 때
<script>태그에 쓰인 파일을 다운로드하고 완료되면 파일을 실행한다.
위 방식의 장점 :
<head>태그 내에서의 단점을 보완 (HTML 파일을 모두 파싱한 후에 JS 파일을 다운로드&실행하기 때문에 사용자가 화면을 빨리 볼 수 있음)
❗️단점도 존재 : HTML 코드를 모두 읽은 뒤에 JS 파일이 다운&실행되기 때문에 사용자가 content를 보는 시점에 아직 완성되지 않은(의미가 없는) content를 볼 수 있음.
async, defer 속성으로 단점 보완
- script 속성인 async, defer 사용하여 이러한 단점을 해결할 수 있다.
async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script async src="main.js"></script> <!-- async 태그 삽입 -->
- HTML 파일을 파싱하는 동시에 JS 파일을 다운로드하고 바로 JS 파일을 실행한다. JS 파일이 실행되는 동안 파싱이 중지되었다가 JS 파일이 실행이 완료되면 다시 HTML 파일 파싱이 시작된다.
장점 :
<body>태그 끝에 위치시켰을 때와 달리 JS 파일 다운로드가 HTML 파싱과 병렬적으로 이루어지기 때문에 다운로드 시간을 단축시킬 수 있다.
단점 : JS 파일 내부에 HTML에서 쿼리를 조회하고 조작하는 부분이 있을 때, 해당 쿼리 실행을 할 수 있는 HTML 코드가 JS가 실행된 다음에 위치해있다면 문제가 생길 수 있고, HTML 코드의 파싱이 완료되어야 사용자가 볼 수 있기 때문에 사용자가 화면을 보기까지 다소 시간이 걸릴 수 있다.
defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script defer src="main.js"></script> <!-- defer 태그 삽입 -->
- HTML 파일을 파싱하다가
<head>태그에 있는<script>태그를 만나면 HTML 파싱과 동시에 JS 파일을 다운로드 하고, 파싱이 끝나게 되었을 때 JS 파일을 실행한다.장점 : HTML 코드를 파싱하는 동안
<script>내부의 모든 파일 다운로드를 완료하고 사용자가 화면을 보는 직후에 바로 해당 파일이 실행된다.
결론적으로 <script> 태그의 위치는?
❗️ <head> 태그에 defer 속성을 활용한 <script> 태그가 제일 효율적인것 같다.
실패란 못하는 것이 아니라 하지 않았기 때문에 생긴 결과물이다