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를 실행시킨다.
