html 안에 <script> 파일을 어디에 넣어야 할까?

가르쳐주는 사람마다, 책마다 다 달랐다.

그래서 직접 찾아봤다.

 

https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

Where should I put <script> tags in HTML markup?

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

async vs defer attributes

https://flaviocopes.com/javascript-async-defer/#just-tell-me-the-best-way

Efficiently load JavaScript with defer and async

가장 아래 링크의 설명을 예시로 가져와보겠다.

 

• defer나 async 속성이 없고 head에 그냥 script파일을 링크할 경우

html파일을 파싱을 시작하다가 script파일을 만나자마자 script파일을 다운로드하고 실행완료 할 때 까지 html의 로딩은 멈춰버린다. script파일의 실행이 끝나면 그 때 다시 html파일을 파싱하기 시작한다. 당연히 긴 딜레이를 가져오기 때문에 좋지 않은 방법이다.

 

• defer나 async 속성이 없고 body태그가 끝나기 바로 직전에 script파일을 링크할 경우

앞서 말한 head 안에 파일이 위치했을 때의 대안으로 많이 사용하는 방식인데, html의 모든 파싱을 다 기다리고 script의 다운로드를 그때서야 시작하니 베스트는 아니다.

 

---

그래서 추천하는 방식은?

https://flaviocopes.com/javascript-async-defer/#just-tell-me-the-best-way

head 태그 안에, defer 속성을 같이 넣어주자!

 

이는 html이 파싱되는동안 script도 다운로드를 끝내놓고, html파싱이 끝나자 마자 미리 받아놓은 script파일을 실행만 시켜주면 되는 방식이다. 속도로는 승자이다! 이는 html의 파싱을 우선적으로 끝낼 수 있어 body태그 맨 끝에 위치하는 방식의 장점을 가져오면서도 script의 fetch까지 진행가능하다는 이점이 있다.

 

 

 

결론:

일단 깊게는 들어가지 말고,

헤더태그 안에 defer 속성을 사용해보자!

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