티스토리 뷰

HTML,CSS

[HTML] script 태그의 위치에 따른 차이점 - async, defer

예둥 2024. 6. 7. 10:40

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

js 파일을 script 태그로 html에 연결하는 방법은 크게 4가지가 있다. 연결 위치에 따라 차이가 발생하는데, 그 이유는 웹 브라우저의 동작 과정과 연관되어 있다. script 태그 위치에 따른 차이점과 무엇이 가장 선호되는지 알아보자.

 

1. head 태그

html 파싱 > html 파싱 stop > js 파일 다운로드 후 실행 > html 이어서 파싱

<html>
  <head>
    <script src="index.js"></script>
  </head>
  <body>
    <h2>head 연결</h2>
  </body>
</html>

 

  • 장점 : 웹사이트가 완전한 형태로 보여진다.
  • 단점 : js 파일의 용량이 크고 인터넷 속도가 느리다면 웹사이트를 보는 데까지 많은 시간이 소요된다.

2. body 태그 끝

html 전체 파싱 > js 파일 다운로드 > js 파일 실행

<html>
  <head>
  </head>
  <body>
  	<h2>body 끝 연결</h2>
   	<script src="index.js"></script>
  </body>
</html>

 

  • 장점 : js 파일을 다운로드하기 전 html 코드를 모두 읽기에 사용자가 화면의 내용을 빨리 볼 수 있다.
  • 단점 : html 코드가 js에 의존적인 웹사이트라면 사용자가 의미없는 화면을 볼 수 있다. -> 의미있는 화면을 보기까지에는 오랜 시간이 소요될 수 있다.

3. head 태그 + async 속성 추가

html 파싱 > js 파일 만나면 html과 병렬적으로 다운로드 > js 파일 다운로드 완료되면 html 파싱 멈추고 js 파일 실행 > html 이어서 파싱

 

참고 : async는 boolean 타입의 속성값이라 선언하는 것만으로도 true로 설정됨

<head>
  <script async src="index.js"></script>
</head>
<body>
  <h2>async 속성 추가</h2>
</body>
</html>
  • 장점 : js에 의존적인 웹을 더 빨리 실행시킬 수 있다. 파싱과 패칭이 병렬적으로 이루어지기 때문에 다운로드 받는 시간을 절약할 수 있다.
  • 단점 : 결국에는 html 파싱이 자바스크립트 파일을 실행시키는 동안에 멈추게 돼 head부분에 넣는 1번의 상황에서 일어날 문제를 겪을 수 있다.

4. head 태그 + defer 속성 추가

html 파싱 > js 파일 병렬로 다운로드 > html 파싱 완료 > js 실행

<head>
  <script defer src="index.js"></script>
</head>
<body>
  <h2>defer 속성 추가</h2>
</body>
</html>
  • 장점 : 파싱과 패칭이 병렬적으로 일어나면서 파싱을 중도에 멈추지 않고 끝낼 수 있다. 즉, 빠르게 완전한 웹페이지를 안전하게 볼 수 있다.

async와 defer 속성

  • 공통점 : html 파일을 불러오면서(DOM 구성하면서) 동시에 스크립트를 다운로드한다.
  • 차이점 : defer 속성 추가시 html 파싱이 완료된 후에 script를 실행시키고, async 속성 추가시 script가 다운로드되면 html 파싱을 멈추고 script 실행 후 나머지 html 파싱한다.

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

[CSS] 마진(margin)과 패딩(padding)  (0) 2024.04.30
[HTML] 시맨틱 태그 (Semantic Tag)란?  (0) 2024.04.29