[HTML/CSS]script 태그의 위치에 따른 차이점

중성자 2021. 11. 11. 15:19

2021. 11. 11. 15:19

728x90

script 태그란?

[references]

http://tcpschool.com/html-tags/script

script 태그의 위치에 따른 차이점

1. script 태그가 head 태그 안에 있을 때

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script src="test.js"></script> // script 태그가 head 태그 안에 위치
  </head>
  <body></body>
</html>

js 파일 사이즈가 크거나, 인터넷 환경이 느릴 때 사용자가 웹사이트를 로딩하는데 시간이 오래 걸린다.

따라서 script를 head 태그에 포함하는 것은 좋은 선택은 아니다.

2. script 태그가 body 태그의 제일 하단에 위치해 있을 때

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script src="test.js"></script> // script 태그가 body 태그의 하단에 위치
  </body>
</html>

html이 모두 준비가 된 후에 javascript를 실행한다.

사용자가 기본적인 html 컨텐츠를 빨리 볼 수 있는 장점이 있지만, 해당 웹사이트가 javascript에 의존적이라면 의미 있는 웹페이지를 보기까지 시간이 오래 걸린다.

3. script 태그가 head 태그 안에 있지만, async 속성 값을 사용한 경우

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script async src="test.js"></script> // async 속성값을 사용
  </head>
  <body>
    <div></div>
  </body>
</html>

async 속성을 사용할 경우, 위 사진과 같이 html 파싱과 javascript 다운로드를 병렬로 수행한다. 다만 javascript 다운로드가 완료되면 html 파싱을 중지하고, 다운로드된 javascript 파일을 먼저 수행한 후, 나머지 html을 파싱한다.

병렬로 진행되기 때문에 웹사이트를 불러오는 속도를 조금 빠르게 할 순 있지만, html이 파싱되기 전에 javascript가 동작하므로 javascript에 html과 상호작용하는 코드가 있을 경우 제대로 작동하지 않을 가능성이 있다.

4. script 태그가 head 태그 안에 있지만, defer 속성값을 사용한 경우

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script defer src="test.js"></script> // defer 속성값을 사용 
  </head>
  <body>
    <div></div>
  </body>
</html>

async와 동일하게 html 파싱중에 javascript 다운로드가 병렬적으로 진행된다. 그러나 async와 다르게 html 파싱이 모두 종료된 후에 javascript 명령을 수행한다.

[references]

드림코딩 : script async와 defer의 차이점

저작자표시 비영리 변경금지

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML/CSS]inline, block, inline-block 개념 비교 (0)	2021.11.17
[HTML/CSS]Semantic Web과 Semantic Tag 이해하기 (0)	2021.11.16

잡동구리들