1. Script를 head에 포함시키는 것
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<title>Document</title>
<script src="main.js"></script>
</head>
<body></body>
</html>
- script가 head에 있게되면 HTML을 parsing 하던 도중에 멈추고 JS를 fetching하고 Executing까지 하게됩니다.
- 이렇게 하게 되면 만약에 JS파일의 크기가 매우 크다면 사용자들이 화면을 보기까지 시간이 많이 소요되어 불편함을 초래할 수 있게 됩니다.
2. body 끝부분에script를 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>
- 이렇게 하면 JS를 받아오기 전에 HTML을 다 받아오기 때문에 사용자가 보다 빠르게 화면을 볼 수 있게 됩니다.
- 하지만 이때 단점은 만약 당신의 웹사이트가 자바스크립트에 굉장히 의존적인 상태라면(자바스크립트에 의해 렌더링되는 요소가 많다면) 자바스크립트의 fetching 및 execution이 완료 될 때까지 기다려야 한다는 단점이 있습니다.
3. head + async
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<title>Document</title>
<script async src="main.js"></script>
</head>
<body></body>
</html>
- async를 사용하게 되면 JS Fetching 작업이 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약 할 수 있습니다.
- 하지만 async도 JS가 HTML보다 먼저 정의되기 때문에 자바스크립트 의존적인 웹 사이트 경우 head에 그냥 놓는 것이랑 비슷한 문제를 일으킬 수 있습니다.
4. Head + defer
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body></body>
</html>
- defer의 방식은 HTML을 parsing 하는 동안 JS를 fetching해놓고 HTML parsing을 완료해서 일단 사용자에게 화면을 먼저 보여주고 바로 이어서 JS를 실행하게 됩니다.
- 만약 실행해야하는 자바스크립트 파일이 여러개이고 순차적으로 실행해야 하는 상황이라면 async는 순차적으로 실행하는게 불가능하고 defer는 가능합니다.
- 결론적으로 script를 넣을때는 head부분에 defer를 쓰는 것이 가장 효율적인 방식입니다.
[Reference]
https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
제대로 알기위해 기록합니다