✏️Achievement Goals

✅ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.
✅ <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.

📝summary

<script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있다

결론은 body 태그가 끝나기 전 사용해야 한다
왜 위치를 body 태그 하단에 사용해야 하는지 알기 위해서는
브라우저의 작동원리를 이해해야 한다

2-3번의 순서를 보면 HTML을 파싱한 다음 DOM 트리를 생성한다
이때 웹 브라우저가 <script> 요소를 만나면,
HTML 해석을 잠시 멈추고 <script> 요소를 먼저 실행한다
그 뒤에 HTMl 파싱이 계속된다

파싱이란? 간단히 구문 분석
문장의 구성성분을 분해, 그 관계를 분석해 구조를 결정하는 것
즉 데이터를 분해, 분석해 원하는 형태로 만든뒤 사용하는 프로그램이다

<head>
  <script src="script.js"></script>
</head>

head 태그 안쪽에 script태그를 삽입하게 되면 두가지 문제점이 있다

script 태그의 파일은 다운로드(fetching), 실행(execution)의 두 가지 과정을 거쳐 실행된다

하지만 HTML은 파싱 도중, script 태그를 만나게 되면 중간에 파싱이 멈춘다
그렇기때문에 body 태그의 UI는 script태그를 읽은 후에 사용자에게 보여지게 되고
그만큼 웹페이지를 나타내는 것이 느려지게 된다

또 HTML 파싱이 다 되기 전에 script 파일을 실행시키기 때문에
존재하지 않는 DOM 요소에 접근하려는 시도로 문제가 일어날 수 있다

<body>
  <div>Hello</div>
  
  <script src="script.js"></script>
</body>

HTML을 다운받고 파싱을 마친 후 script 태그를 읽기 때문에
<head> 안쪽에 삽입하는 방법보다 빠르게 볼 수 있다.

하지만 이것도 단점이 있다
웹을 사용할때 사용자가 자바스크립트 없이는 어떠한 활동도 할 수 없거나
웹이 자바스크립트에 의존적이라면 HTML이 파싱이 다 돼도 의미가 없다

script 태그의 async와 defer 속성을 활용하면 스크립트 로딩 순서를 제어할 수 있다
async와 defer는 head 내부에 사용한다

<head>
  <script async src="script.js"></script>
</head>

위의 사진처럼 script 태그를 만나도 html parsing이 중단되지 않고
script 로드와 html 파싱이 같이 진행되다가
script 로드가 끝나면 script가 실행되는 시점에
html 파싱이 중단되고 실행이 끝나면 html 파싱이 다시 실행된다

장점 : 자바스크립트에 의존적인 웹을 좀 더 빨리 실행시킬 수 있다

단점 :

HTML파싱이 자바스크립트 파일을 실행시키는 동안 멈추게 되므로
<head> 안쪽에 삽입하는 방법에서와 같은 문제가 일어날 수 있다
실행시켜야 할 script 태그가 여러개일 때,
먼저 다운로드 받아지는 script를 바로 실행시키기 때문에
script 파일의 실행 순서에 영향을 받는 프로젝트라면 문제가 생길 수 있다

<head>
    <script defer src="script.js"></script>
</head>

위의 사진처럼 script 태그를 만났을때
html 파싱을 진행하면서 scirpt는 동시에 다운로드만 시켜놓는다
그리고 html 파싱이 끝나고 난 뒤에 script가 실행된다

HTML파싱이 중간에 멈출 문제도 없고 위의 단점도 개선시킬 수 있기 때문에
제일 이상적인 방법이라고 할 수 있다

이 문제에 관하여(코드스테이츠 4주차 / <disable_script> 태그의 위치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@support/코드스테이츠-4주차-script-태그의-위치

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)