자기소개 페이지를 만들며 유튜브에서 여러 가지 코딩 영상을 봤는데, head에 삽입하는 경우도 있고 body(가장 위 또는 가장 아래)에 삽입하는 경우도 있었다. 어떤 차이가 있는지 알아보자!
head
head에 삽입하는 경우 웹사이트가 완벽한 형태로 보여진다는 장점이 있으나, JS파일이 크거나 인터넷이 느릴 경우에 웹사이트를 보기 까지 시간이 오래 걸린다.
<head>
<script src="main.js"></script>
</head>
---
<head>
<script asyn src="main.js"></script>
</head>
---
<head>
<script defer src="main.js"></script>
</head>
첫 번째 방법으로 추가했을 때 HTML parsing을 하다 멈추고 JS를 fetching(script download) 및 실행(executing)한 뒤 HTML parsing을 재개한다. 이 경우 웹사이트가 완벽한 형태로 보여진다는 장점이 있으나, JS파일이 크거나 인터넷이 느릴 경우에 웹사이트를 보기 까지 시간이 오래 걸린다.
두 번째 방법은 HTML parsing과 JS fetching이 병렬적으로 이루어진다. fetching 시간을 절약할 수 있으나, JS가 DOM 요소를 조작하고자 할 때 HTML parsing이 끝나지 않아 필요 요소가 아직 정의되어 있지 않을 수 있다는 단점이 있다. 또한 사용자가 해당 페이지를 보는데 여전히 시간이 오래 걸린다. JS fetching이 된 순서로 진행되어 순서가 중요한 경우에 문제가 될 수 있다.
세 번째 방법도 두 번째 마찬가지로 HTML parsing과 JS fetching이 병렬적으로 이루어진다. 하지만 HTML parsing이 완료되어야 JS가 실행된다. JS가 작성된 순서대로 실행된다.
Page is ready when 'parsing HTML' is finished
body
<body>
<div></div>
<div></div>
<script src="main.js"></script>
</body>
HTML 컨텐츠를 빨리 확인할 수 있으나, 웹사이트가 JS 의존도가 높은 경우 정상적으로 작동하기 위해서는 기다려야 한다. body 하단이 아닌, 중간에 위치하게 되면 HTML을 읽는 과정에서 스크립트를 만나 중단 시점이 생겨 그만큼 지연될 수 있다는 문제가 있다. 따라서 body 최하단에 위치하는 것이 좋다. 불가능할 경우, async과 defer의 속성을 활용해 원하는 대 스크립트 로딩 순서를 만들 수 있다.
(이미지 출처)
아래 블로그 참조
https://hhh270.tistory.com/28
https://velog.io/@ko12ztwe/HTML-script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98
