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

Lily·2022년 2월 28일
8

preWecode

목록 보기
2/9
post-thumbnail

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

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

1. head 태그

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

<html>
  <head>
    <script src="main.js"></script>
  </head>
  <body>
    <h2>head에 연결했어요</h2>
  </body>
</html>
  • 장점: 웹사이트가 완전한 형태로 보여진다.

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


2. body 태그 끝

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

<html>
  <head>
  </head>
  <body>
  	<h2>body 끝에 연결했어요</h2>
   	<script src="main.js"></script>
  </body>
</html>
  • 장점: js 파일을 다운로드하기 전 HTML 코드를 모두 읽기 때문에 사용자가 화면의 내용을 빨리 볼 수 있다.
  • 단점: HTML 코드가 js에 의존적인 웹사이트라면 사용자가 의미없는 화면을 볼 수 있다. 즉, 의미있는 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다.

3. head 태그 + async 속성 추가

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

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

<!DOCTYPE html>
<head>
  <script async src="main.js"></script>
</head>
<body>
  <h2>async 속성을 추가했어요</h2>
</body>
</html>
  • 장점: js에 의존적인 웹을 좀 더 빨리 실행시킬 수 있다. 파싱과 패칭이 병렬적으로 이루어지기 때문에 다운로드 받는 시간을 절약할 수 있다.

  • 단점: 결국에는 html 파싱이 자바스크립트 파일을 실행시키는 동안에 멈추게 돼 head부분에 넣는 1번의 상황에서 일어날 문제를 겪을 수 있다.


4. head 태그 + defer 속성 추가 (가장 추천!)

html 파싱 ▶️ js 파일 병렬로 다운로드 ▶️ html 파싱 완료 ▶️ js 파일 실행
(파싱과 패칭이 동시에 일어난다.)

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

  • 단점: 아직 모르겠다.


<async와 defer 속성>

  • 공통점 : html 파일을 불러오면서(DOM을 구성하면서) 동시에 스크립트를 다운로드한다.
  • 차이점 : html 파싱이 완료된 후에 script를 실행시킨다.


출처: https://jae04099.tistory.com/entry/HTML-script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C

https://youtu.be/tJieVCgGzhs

0개의 댓글