본문으로 바로 가기
로고
개발

[JS] 스크립트 위치 차이

읽는 시간 5분
스크립트 위치 차이 글의 썸네일"

#들어가며

DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하려고하면 에러가 발생하기 때문에 script의 위치는 중요하다. 자바스크립트를 처음 접할 때, 다양한 영상을 보다보면 스크립트 태그가 어떨 땐 바디의 가장 아래 부분에 있고, 헤드 태그에 위치하는 경우도 있어서 나의 경우엔 많이 헷갈리고 어떤 차이가 있는지 궁금했다.

#<head/> 태그에 위치 (옵션 없음)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="a.js"></script><!-- head에 선언 -->
</head>
<body>
 
 
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="a.js"></script><!-- head에 선언 -->
</head>
<body>
 
 
</body>
</html>
script가 head에 위치(no option)
script가 head에 위치(no option)

#<body/> 태그에 위치

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header></header>
  <section></section>
  <footer></footer>
  <script src="a.js"></script><!-- body끝에 선언 -->
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header></header>
  <section></section>
  <footer></footer>
  <script src="a.js"></script><!-- body끝에 선언 -->
</body>
</html>

body끝에 선언한 경우는 HTML 파싱이 다 끝나고 난후에 js스크립트를 실행하기 때문에 HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩시간이 단축된다.

단점으로는 만약 웹페이지가 자바스크립트에 의존적이라면 자바스크립트 파일이 준비되기도 전에 HTML파일이 보여지기때문에 의도한 페이지를 보여주기까지 지연이 있을수도 있다.

script가 body 끝에 위치할 때
script가 body 끝에 위치할 때

#defer와 async

위 두가지 방법 말고 script 태그에는 defer와 async 속성을 줄 수도 있다.

#<head/> 태그에 위치 (async 옵션)

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script async src="a.js"></script><!-- async -->
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script async src="a.js"></script><!-- async -->
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>
script가 head에 위치(async 옵션)
script가 head에 위치(async 옵션)

async 옵션은 script 파일 다운로드가 완료되면 HTML parsing을 멈추고 script 파일을 실행한다. 아직 HTML이 모두 정의되어 있지 않기 때문에 js파일에서 돔요소를 조작하는 코드가 있다고 하면 문제가 생길 수 있다.

async 옵션은 script태그 선언 순서에 상관없이 다운로드 받아지는 순서대로 js파일을 실행한다.

#<head/> 태그에 위치 (defer 옵션)

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="a.js"></script><!-- defer -->
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="a.js"></script><!-- defer -->
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>
script가 head에 위치할때(defer 옵션)
script가 head에 위치할때(defer 옵션)

defer 옵션은 HTML 파싱 중에 필요한 js파일을 미리 다운받아놓고 HTML parsing이 완료되면 js파일을 실행

async와 defer옵션의 차이점은 defer옵션은 문서에 나타나는 순서대로 js파일이 실행되도록 보장된다.

#여러 개의 스크립트

defer와 async의 차이점을 보기 쉽도록 여러 개의 스크립트 태그가 있을 경우를 살펴보자.

#<head/> 태그에 위치 (async 옵션) - 다수의 스크립트

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script async src="a.js"></script><!-- async -->
    <script async src="b.js"></script>
    <script async src="c.js"></script>
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script async src="a.js"></script><!-- async -->
    <script async src="b.js"></script>
    <script async src="c.js"></script>
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>

async 옵션은 다운로드가 먼저 되는 순서대로 실행하기 때문에 html 문서 상에서는 a, b, c 순서로 배치했음에도 불구하고 먼저 다운로드된 b.js 부터

b, a, c 순서로 실행된다. 만약 스크립트 파일이 순서에 의존적이었다면 문제가 발생할 수도 있다.

#<head/> 태그에 위치 (defer 옵션) - 다수의 스크립트

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="a.js"></script><!-- async -->
    <script defer src="b.js"></script>
    <script defer src="c.js"></script>
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="a.js"></script><!-- async -->
    <script defer src="b.js"></script>
    <script defer src="c.js"></script>
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>

defer 옵션은 html 파일에 배치해놓은 순서대로 js파일이 실행되도록 보장해준다.

← 이전 글

[JS] 디바운스와 쓰로틀

[JS] 디바운스와 쓰로틀

성능 최적화와 서버 리소스의 효율적인 사용을 위한 기법인 디바운스와 쓰로틀에 대해 알아보자

읽는 시간 5분

다음 글 →

[삽질] Next13, Vanilla Extract, 윈도우 이슈

[삽질] Next13, Vanilla Extract, 윈도우 이슈

NextJS 13버전과 바닐라 익스트랙트를 이용해서 공부를 해보려다 만난 이슈

읽는 시간 3분